import React, { ReactNode, useEffect, useState } from 'react';
import { Box, Checkbox, Text, useViewport } from '@nova-hf/ui';
import { IconType } from '@nova-hf/ui/umd/ts/src/icon-library/iconMap';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { IContext } from 'typings/context';
import { useCustomerNameQuery } from 'typings/graphql';

import Hradleid from '../../store/hradleid';

import StepWrapper from './StepWrapper';

type MultiStepWrapperProps = {
  hradleid: Hradleid;
  color: MainColorType;
  getMappedContracts: Array<{ name: string; info: string; id: string }>;
  title: string;
  children: ReactNode;
  sendCheckedToChild: (contractId: Array<string>) => void;
  firstRowTitle: string;
  secondRowTitle: string;
  disabledContracts: string[];
  icon: IconType;
};

const MultiStepWrapper = ({
  hradleid,
  color,
  title,
  children,
  getMappedContracts,
  sendCheckedToChild,
  firstRowTitle,
  secondRowTitle,
  disabledContracts,
  icon,
}: MultiStepWrapperProps) => {
  const { t } = useTranslation(['multi']);
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const contractIds = hradleid?.contracts?.map((contract) => contract.id);
  const [checkedContracts, setCheckedContracts] = useState<string[]>(contractIds);
  const handleDisabledContracts = disabledContracts?.length ?? 0;
  const { isLarge, isXLarge } = useViewport();
  const isDesktop = isLarge || isXLarge;

  const mappedContracts = getMappedContracts;
  const { data: customerData } = useCustomerNameQuery({
    variables: { input: { id: customerId.toString() } },
  });

  const handleCheckboxClick = (id: string) => {
    if (checkedContracts.includes(id)) {
      setCheckedContracts(checkedContracts.filter((contractId) => id !== contractId));
    } else {
      setCheckedContracts([...checkedContracts, id]);
    }
  };

  useEffect(() => {
    sendCheckedToChild(checkedContracts);
  }, [checkedContracts]);
  return (
    <StepWrapper
      color={color}
      returnUrl={`/beta/${customerId}/thjonustur`}
      title={title}
      subTitle={customerData?.customer?.name ?? t('multi.noName')}
      icon={icon}
      isMulti={true}
      hasTooltip={true}
      totalChecks={checkedContracts?.length - handleDisabledContracts}
      mainButton={{
        text: t('multi.needHelp'),
        renderAs: 'a',
        colorScheme: color,
        dottedShadow: 'none',
        icon: 'chat',
        href: 'https://www.nova.is/hafa-samband/panta-simtal',
        target: '_blank',
      }}
      childrenBottom={
        <Box marginTop={-2}>
          <Box marginBottom={2} display="flex" flexDirection="row" justifyContent="space-between">
            <Text variant="pMediumBold" color="white">
              {firstRowTitle}
            </Text>
            <Text variant="pMediumBold" color="white">
              {secondRowTitle}
            </Text>
          </Box>
          <Box overflowY={'scroll'} maxHeight={isDesktop ? 70 : 20}>
            {mappedContracts?.map((contract) => {
              return (
                <Box display="flex" flexDirection="column" key={contract?.id}>
                  <Box
                    marginBottom={2}
                    justifyContent="space-between"
                    display="flex"
                    flexDirection="row"
                    alignItems="center"
                  >
                    <Box
                      style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
                      display="flex"
                      justifyContent="flex-start"
                      flexDirection="row"
                    >
                      <Checkbox
                        isChecked={
                          checkedContracts?.includes(contract?.id) &&
                          !disabledContracts?.includes(contract?.id)
                        }
                        isDisabled={disabledContracts?.includes(contract?.id)}
                        type="checked"
                        color={color}
                        onChange={() => {
                          handleCheckboxClick(contract?.id);
                        }}
                      />
                      <Text variant="pMediumRegular" color="grey100">
                        {contract?.name}
                      </Text>
                    </Box>
                    <Box
                      style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
                    >
                      <Text variant="pMediumBold" color="white">
                        {contract?.info}
                      </Text>
                    </Box>
                  </Box>
                </Box>
              );
            })}
          </Box>
        </Box>
      }
    >
      {children}
    </StepWrapper>
  );
};

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

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