import React, { useState } from 'react';
import { Box, Icon, Text } from '@nova-hf/ui';
import { getMaxLengthOfName } from 'beta/utils/helpers';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { ContractItemType } from 'typings/graphql';

import MultiStepWrapper from '../../../containers/layout/MultiStepWrapper';
import Hradleid from '../../../store/hradleid';
import { IContext } from '../../../typings/context';
import { useTranslation } from '../../../utils/i18n';
import { ChangePayerForm } from '../[serviceId]/stillingar/containers/ChangePayerForm';

const COLOR = 'pink';

type GreidandiProps = {
  hradleid: Hradleid;
};

const Greidandi = ({ hradleid }: GreidandiProps) => {
  const { t } = useTranslation(['multi']);
  const [checkedContracts, setCheckedContracts] = useState<string[]>();
  const router = useRouter();
  const customerId = router?.query?.customerId;

  const mapContractsToUsernamesAndInfo = () => {
    return hradleid?.contracts?.map((contract) => {
      const serviceContractItem = contract?.contractItems.find(
        (item) => item.type === ContractItemType.Service,
      );
      const username = serviceContractItem
        ? serviceContractItem?.serviceInfo?.userName
        : t('multi.noName');
      const payerInfo = contract?.payerName ? contract?.payerName : t('payer.unknown');
      const MAX = getMaxLengthOfName();
      const truncatedName =
        username && username.length > MAX ? `${username.slice(0, MAX)}...` : username;

      return {
        name: truncatedName as string,
        info: payerInfo,
        id: contract?.id,
        payer: contract?.paymentMethod?.customerId,
      };
    });
  };

  const mappedContracts = mapContractsToUsernamesAndInfo();
  const contractsWhereCustomerIsNotPayer = mappedContracts?.filter(
    (contract) => contract.payer !== customerId,
  );
  const filteredContractIds = contractsWhereCustomerIsNotPayer?.map((contract) => contract.id);
  const getCheckedContracts = (contractIds: Array<string>) => {
    setCheckedContracts(contractIds);
  };

  return (
    <MultiStepWrapper
      hradleid={hradleid}
      color={COLOR}
      getMappedContracts={mappedContracts}
      disabledContracts={filteredContractIds ?? []}
      sendCheckedToChild={getCheckedContracts}
      title={t('headers.payerChange')}
      firstRowTitle={t('headers.user')}
      secondRowTitle={t('headers.payer')}
      icon="transfer"
    >
      <Box display="flex" flexDirection="column" gap={3}>
        <Text color="black100" variant="h4">
          {t('payer.choose')}
        </Text>
        <Text color="black100">{t('payer.subtitle')}</Text>

        <ChangePayerForm
          customerId={customerId?.toString()}
          contractIds={checkedContracts}
          color="pink"
        />
        {filteredContractIds && filteredContractIds.length > 0 && (
          <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
            <Icon icon="info" color="warning" />
            <Text>{t('multi:multi.payerError')}</Text>
          </Box>
        )}
      </Box>
    </MultiStepWrapper>
  );
};

Greidandi.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: ['multi'],
  };
};

export default inject('hradleid')(observer(Greidandi));