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, PaymentTypeV2 } 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 PaymentMethod from '../[serviceId]/stillingar/containers/PaymentMethod';

const COLOR = 'pink';

type GreidslumatiProps = {
  hradleid: Hradleid;
};

const Greidslumati = ({ hradleid }: GreidslumatiProps) => {
  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 isBankClaim = contract.paymentMethod?.type === PaymentTypeV2.BankClaim;
      const isCard = contract.paymentMethod?.type === PaymentTypeV2.CreditCard;
      const serviceContractItem = contract?.contractItems.find(
        (item) => item.type === ContractItemType.Service,
      );
      const username = serviceContractItem
        ? serviceContractItem?.serviceInfo?.userName
        : t('multi.noName');
      const cardInfo = isCard
        ? `${t('paymentMethod.creditCard')}(${
            contract?.paymentMethod?.maskedNumber
              ? contract?.paymentMethod?.maskedNumber?.slice(-4)
              : '****'
          })`
        : '';
      const claimInfo =
        isBankClaim && contract?.paymentMethod?.name
          ? contract?.paymentMethod?.name
          : t('paymentMethod.internetBank');
      const MAX = getMaxLengthOfName();
      const truncatedName =
        username && username.length > MAX ? `${username.slice(0, MAX)}...` : username;

      return {
        name: truncatedName as string,
        info: isCard ? cardInfo : claimInfo,
        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={'pink'}
      getMappedContracts={mappedContracts}
      disabledContracts={filteredContractIds ?? []}
      sendCheckedToChild={getCheckedContracts}
      title={t('paymentMethod.paymentMethod')}
      firstRowTitle={t('headers.user')}
      secondRowTitle={t('headers.paymentMethod')}
      icon="creditcard"
    >
      <Box display="flex" flexDirection="column" gap={3}>
        <Text color="black100" variant="h4">
          {t('paymentMethod.choose')}
        </Text>
        <Text color="black100">{t('paymentMethod.update')}</Text>

        <PaymentMethod contractIds={checkedContracts} color={COLOR} />
        {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>
  );
};

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

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