/* eslint-disable object-curly-newline */
import Link from 'Elements/Link';
import Tooltip from 'Elements/Tooltip';
import type { ReactNode } from 'react';
import styled from 'styled-components';
import { Flex } from 'UIKit/grid';
import { min } from 'UIKit/mq';
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';

const ElementTitle = styled.h5`
  color: rgba(0, 0, 0, 0.75);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 8px 3px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  ${min('laptop')} {
    font-size: 14px;
  }
`;

function Head({ title, addon }: { title: string; addon?: ReactNode }) {
  return (
    <Flex
      flexDirection={['column', 'row']}
      justifyContent={['', 'space-between']}
      alignItems={['', 'center']}
    >
      <ElementTitle>{title}</ElementTitle>
      {addon}
    </Flex>
  );
}

function Container({ children }: { children: ReactNode }) {
  return <Flex flexDirection="column">{children}</Flex>;
}

type RenderProps = { render: () => JSX.Element };

const renderElements = (Object.keys(map) as (keyof typeof map)[]).reduce((acc, elementName) => {
  const title = titles[elementName];
  const valueName = map[elementName];
  const Component = components[elementName];
  const props = elementsProps[elementName];
  const builder = builders[elementName];

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

  acc[elementName] = {
    render: () => (
      <Container key={elementName}>
        <Head title={title} />
        <Element {...props} />
      </Container>
    ),
  };

  return acc;
}, {} as Record<keyof typeof map, RenderProps>);

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

const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
  selectLead: {
    render: () => {
      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: 'selectLead',
        valueName,
      });

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

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

  selectOpportunity: {
    render: () => {
      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: 'selectOpportunity',
        valueName,
      });

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

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

  selectQuote: {
    render: () => {
      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: 'selectQuote',
        valueName,
      });

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

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

  tbxVehicleTaxInYear: {
    render: () => {
      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: 'tbxVehicleTaxInYear',
        valueName,
      });

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

  selectHighSeasonStart: {
    render: () => {
      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: 'selectHighSeasonStart',
        valueName,
      });

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

export default Object.assign(renderElements, overrideRenderElements);
