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 { useErrors, useResults } from '@/stores/hooks';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import { observer } from 'mobx-react-lite';
import Head from 'next/head';
import styled from 'styled-components';
import { Badge } from 'ui/elements';
import {
  BarChartOutlined,
  CalculatorOutlined,
  ProfileOutlined,
  WarningOutlined,
} from 'ui/elements/icons';

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

const StyledBadge = styled(Badge)`
  color: unset !important;
`;

export const tabs = [
  {
    Component: Settings,
    Icon: () => <ProfileOutlined style={defaultIconStyle} />,
    key: 'settings',
    title: 'Интерес/Расчет',
  },
  {
    Component: Form,
    Icon: () => <CalculatorOutlined style={defaultIconStyle} />,
    key: 'form',
    title: 'Параметры',
  },
  {
    Component: Output,
    Icon: observer(() => {
      const { hasResults } = useResults();

      return (
        <StyledBadge status="success" dot={hasResults}>
          <BarChartOutlined style={defaultIconStyle} />
        </StyledBadge>
      );
    }),
    key: 'output',
    title: 'Результаты',
  },
  {
    Component: Validation,
    Icon: observer(() => {
      const { hasErrors } = useErrors();

      return (
        <StyledBadge status="error" dot={hasErrors}>
          <WarningOutlined style={defaultIconStyle} />
        </StyledBadge>
      );
    }),
    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>
    </>
  );
}
