
import Link from 'client/Elements/Link';
import buildTooltip from 'client/Elements/Tooltip';
import { Flex } from 'client/UIKit/grid';
import { ElementProps } from 'types/elements';
import InsuranceTag from '../../Components/InsuranceTag';
import { AllElementsNames } from '../../types/elements';
import { TableNames } from '../../types/tables';
import buildLink from '../builders/buildLink';

const Head = props => (
  <Flex
    flexDirection={['column', 'row']}
    justifyContent={['', 'space-between']}
    alignItems={['', 'center']}
  >
    {props.children}
  </Flex>
);

export default {
  selectLead: {
    render: (Title, Element) => {
      const SubComponent = buildLink({
        name: 'leadUrl',
        text: 'Открыть в CRM',
        valueName: 'leadUrl',
        type: 'link',
        Component: Link,
      });
      return (
        <Flex flexDirection="column">
          <Head>
            <Title />
            <SubComponent />
          </Head>
          <Element />
        </Flex>
      );
    },
  },

  selectOpportunity: {
    render: (Title, Element) => {
      const SubComponent = buildLink({
        name: 'leadUrl',
        text: 'Открыть в CRM',
        valueName: 'opportunityUrl',
        type: 'link',
        Component: Link,
      });
      return (
        <Flex flexDirection="column">
          <Head>
            <Title />
            <SubComponent />
          </Head>
          <Element />
        </Flex>
      );
    },
  },

  selectQuote: {
    render: (Title, Element) => {
      const SubComponent = buildLink({
        name: 'leadUrl',
        text: 'Открыть в CRM',
        valueName: 'quoteUrl',
        type: 'link',
        Component: Link,
      });
      return (
        <Flex flexDirection="column">
          <Head>
            <Title />
            <SubComponent />
          </Head>
          <Element />
        </Flex>
      );
    },
  },

  tableInsurance: {
    sub: {
      Component: InsuranceTag,
    },
    render: (Title, Element) => {
      return (
        <Flex flexDirection="column">
          <Head>
            <Title />
            <InsuranceTag />
          </Head>
          <Element />
        </Flex>
      );
    },
  },

  tbxVehicleTaxInYear: {
    render: (Title, Component) => {
      const Tooltip = buildTooltip({
        title: 'Без учета налога на роскошь',
        placement: 'topLeft',
      });
      return (
        <Tooltip>
          <Flex flexDirection="column">
            <Title />
            <Component />
          </Flex>
        </Tooltip>
      );
    },
  },

  selectHighSeasonStart: {
    render: (Title, Component) => {
      const Tooltip = buildTooltip({
        title: 'С какого платежа начинается полный высокий сезон',
        placement: 'topLeft',
      });
      return (
        <Tooltip>
          <Flex flexDirection="column">
            <Title />
            <Component />
          </Flex>
        </Tooltip>
      );
    },
  },
} as Partial<Record<AllElementsNames | TableNames, ElementProps>>;
