import { Form } from './Form';
import { Layout } from './Layout';
import { Output } from './Output';
import { Settings } from './Settings';
import { Component as Validation } from './Validation';
import { Notification } from '@/Components/Common';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
import { NavigationProvider } from '@/context/navigation';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import Head from 'next/head';
import {
  BarChartOutlined,
  CalculatorOutlined,
  ProfileOutlined,
  WarningOutlined,
} from 'ui/elements/icons';

const defaultIconStyle = { fontSize: '1.2rem' };

export const tabs = [
  {
    Component: Settings,
    icon: <ProfileOutlined style={defaultIconStyle} />,
    key: 'settings',
    title: 'Интерес/Расчет',
  },
  {
    Component: Form,
    icon: <CalculatorOutlined style={defaultIconStyle} />,
    key: 'form',
    title: 'Параметры',
  },
  {
    Component: Output,
    icon: <BarChartOutlined style={defaultIconStyle} />,
    key: 'output',
    title: 'Результаты',
  },
  {
    Component: Validation,
    icon: <WarningOutlined style={defaultIconStyle} />,
    key: 'errors',
    title: 'Ошибки',
  },
];

type ContentProps = {
  readonly initHooks: () => void;
  readonly title: string;
};

export function Content({ initHooks, title }: ContentProps) {
  initHooks();

  return (
    <>
      <Head>
        <title>{getPageTitle(title)}</title>
      </Head>
      <Notification />
      <Media lessThan="laptop">
        <NavigationProvider>
          <Tabs tabs={tabs} />
          <NavigationBar />
        </NavigationProvider>
      </Media>
      <Media greaterThanOrEqual="laptop">
        <Layout>
          <Form />
          <Settings />
          <Output />
        </Layout>
      </Media>
    </>
  );
}
