/* eslint-disable object-curly-newline */
import { Container, Head } from 'Components/Layout/Element';
import { observer } from 'mobx-react-lite';
import type { ComponentProps } from 'react';
import { useStore } from 'stores/hooks';
import Link from 'ui/elements/Link';
import Tooltip from 'ui/elements/Tooltip';
import buildReadonly from '../../builders/build-readonly';
import builders from '../elements-builders';
import components from '../elements-components';
import elementsProps from '../elements-props';
import titles from '../elements-titles';
import map from '../map';
import type { RenderProps } from './types';

const defaultLinkProps: ComponentProps<typeof Link> = {
  text: 'Открыть в CRM',
  type: 'link',
};

const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
  selectLead: {
    render: () => {
      const elementName = 'selectLead';
      const title = titles.selectLead;
      const valueName = map.selectLead;
      const Component = components.selectLead;
      const props = elementsProps.selectLead;
      const builder = builders.selectLead;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      const LinkComponent = buildReadonly(Link, {
        elementName: 'linkLeadUrl',
        valueName: 'leadUrl',
      });

      return (
        <Container key={elementName}>
          <Head
            htmlFor={elementName}
            title={title}
            addon={<LinkComponent {...defaultLinkProps} />}
          />
          <Element {...props} id={elementName} />
        </Container>
      );
    },
  },

  selectOpportunity: {
    render: () => {
      const elementName = 'selectOpportunity';
      const title = titles.selectOpportunity;
      const valueName = map.selectOpportunity;
      const Component = components.selectOpportunity;
      const props = elementsProps.selectOpportunity;
      const builder = builders.selectOpportunity;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      const LinkComponent = buildReadonly(Link, {
        elementName: 'linkOpportunityUrl',
        valueName: 'opportunityUrl',
      });

      return (
        <Container key={elementName}>
          <Head
            htmlFor={elementName}
            title={title}
            addon={<LinkComponent {...defaultLinkProps} />}
          />
          <Element {...props} id={elementName} />
        </Container>
      );
    },
  },

  selectQuote: {
    render: () => {
      const elementName = 'selectQuote';
      const title = titles.selectQuote;
      const valueName = map.selectQuote;
      const Component = components.selectQuote;
      const props = elementsProps.selectQuote;
      const builder = builders.selectQuote;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      const LinkComponent = buildReadonly(Link, {
        elementName: 'linkQuoteUrl',
        valueName: 'quoteUrl',
      });

      return (
        <Container key={elementName}>
          <Head
            htmlFor={elementName}
            title={title}
            addon={<LinkComponent {...defaultLinkProps} />}
          />
          <Element {...props} id={elementName} />
        </Container>
      );
    },
  },

  tbxVehicleTaxInYear: {
    render: () => {
      const elementName = 'tbxVehicleTaxInYear';
      const title = titles.tbxVehicleTaxInYear;
      const valueName = map.tbxVehicleTaxInYear;
      const Component = components.tbxVehicleTaxInYear;
      const props = elementsProps.tbxVehicleTaxInYear;
      const builder = builders.tbxVehicleTaxInYear;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      return (
        <Tooltip title="Без учета налога на роскошь" placement="topLeft">
          <Container>
            <Head htmlFor={elementName} title={title} />
            <Element {...props} id={elementName} />
          </Container>
        </Tooltip>
      );
    },
  },

  selectHighSeasonStart: {
    render: () => {
      const elementName = 'selectHighSeasonStart';
      const title = titles.selectHighSeasonStart;
      const valueName = map.selectHighSeasonStart;
      const Component = components.selectHighSeasonStart;
      const props = elementsProps.selectHighSeasonStart;
      const builder = builders.selectHighSeasonStart;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      return (
        <Tooltip title="С какого платежа начинается полный высокий сезон" placement="topLeft">
          <Container>
            <Head htmlFor={elementName} title={title} />
            <Element {...props} id={elementName} />
          </Container>
        </Tooltip>
      );
    },
  },

  selectSeasonType: {
    render: () => {
      const elementName = 'selectSeasonType';
      const valueName = map.selectSeasonType;
      const Component = components.selectSeasonType;
      const props = elementsProps.selectSeasonType;
      const builder = builders.selectSeasonType;

      const Element = builder(Component, {
        elementName,
        valueName,
      });

      const Title = observer(() => {
        const { $calculation } = useStore();
        const graphType = $calculation.element('radioGraphType').getValue();

        switch (graphType) {
          case 100_000_001:
            return <span>Тип дегрессии</span>;
          case 100_000_003:
            return <span>Тип сезонности</span>;
          default:
            return <span>{titles.selectSeasonType}</span>;
        }
      });

      return (
        <Container>
          <Head htmlFor={elementName} title={<Title />} />
          <Element {...props} id={elementName} />
        </Container>
      );
    },
  },
};

export default overrideRender;
