import React, { ReactNode } from 'react';
import {
  Box,
  CardBase,
  Checkbox,
  Grid,
  GridItem,
  Icon,
  IconButton,
  ListBase,
  ListButton,
  makeToast,
  Menu,
  Pill,
  Separator,
  SwitchBanner,
  Text,
  ThemeColorType,
  Tooltip,
} from '@nova-hf/ui';
import { serviceIconMap, serviceStatusColorIconMap } from 'beta/utils/helpers';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  ContractItem,
  CreditControlSettings,
  ServiceType,
  useUpdateCreditControlSettingsMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { tooltipMessage } from '../contract-list/ContractList';

type BundleContainerListProps = {
  contractItems: Array<ContractItem> | undefined;
  payerName?: string;
  color?: ThemeColorType;
  pillText?: string;
  hasCheckmark?: boolean;
};

const BundleContainerList = ({
  contractItems,
  payerName,
  color,
  pillText,
  hasCheckmark,
}: BundleContainerListProps) => {
  const router = useRouter();
  const { t } = useTranslation(['alltSaman', 'services']);
  const customerId = router.query.customerId as string;
  const [updateCreditControl, { error: updateCreditControlError }] =
    useUpdateCreditControlSettingsMutation();

  const toggleCreditControl = ({ id, contractItemId, isToggledOn }: CreditControlSettings) => {
    updateCreditControl({
      variables: {
        input: {
          creditControlSettingId: id,
          contractItemId: contractItemId,
          isToggledOn: !isToggledOn,
        },
      },
    });
  };
  if (updateCreditControlError) {
    makeToast.danger(t('alltSaman.creditControlError'), '');
  }

  const items = (serviceId: string) => {
    return [
      {
        text: t('alltSaman.lookAtService'),
        wrapper: (link: ReactNode) => (
          <Link href={`/beta/${customerId}/thjonustur/${serviceId}`} legacyBehavior>
            {link}
          </Link>
        ),
        onClick: () => router.push(`/beta/${customerId}/thjonustur/${serviceId}`),
      },
      {
        text: t('alltSaman.removeService'),
        wrapper: (link: ReactNode) => (
          <Link
            href={{
              pathname: '/beta/[customerId]/thjonustur/[serviceId]/thjonustuleidabreyting',
              query: { customerId: customerId, serviceId: serviceId },
            }}
            legacyBehavior
          >
            {link}
          </Link>
        ),
      },
    ];
  };

  return (
    <>
      {contractItems?.map((contractItem) => (
        <Box key={contractItem.id} display="flex" flexDirection="column" marginBottom={3}>
          <ListBase
            linkWrapper={
              hasCheckmark
                ? (children) => (
                    <Link
                      passHref
                      href={`/beta/${customerId}/thjonustur/${contractItem?.service?.id}`}
                      legacyBehavior
                    >
                      {children}
                    </Link>
                  )
                : (children) => <>{children}</>
            }
            key={contractItem?.id}
            renderAs={hasCheckmark ? 'a' : 'div'}
          >
            <Grid gridTemplate={{ sm: 6, lg: 12 }} columnGap={{ sm: 3, lg: 2 }} alignItems="center">
              <GridItem
                gridColumn={
                  hasCheckmark
                    ? { sm: 'span3', lg: 'span4', xl: 'span3' }
                    : { sm: 'span4', lg: 'span4', xl: 'span4' }
                }
              >
                <Box display="flex" flexDirection="row" alignItems="center">
                  {hasCheckmark && (
                    <Checkbox isChecked={false} type="checked" isDisabled color={color} />
                  )}
                  <Icon
                    icon={serviceIconMap(contractItem?.service?.type ?? ServiceType.Unknown)}
                    color={color}
                    size={40}
                  />
                  <Box display="flex" flexDirection="column" marginLeft={3}>
                    <Text variant="pMediumBold">{contractItem?.service?.user?.name ?? ''}</Text>
                    <Text variant="pSmallRegular">{`Greitt af: ${payerName}`}</Text>
                  </Box>
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span6' }} hiddenOn={['lg', 'xl']}>
                <Separator negativeSpace={3} />
              </GridItem>
              <GridItem gridColumn={{ sm: 'span6', lg: 'span2' }}>
                <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
                  <Tooltip
                    icon={serviceStatusColorIconMap(contractItem?.service?.status).icon}
                    color={serviceStatusColorIconMap(contractItem?.service?.status).color}
                  >
                    <Box
                      dottedShadow="none"
                      background="white"
                      padding={2}
                      borderStyle="solid"
                      borderWidth="1px"
                      borderColor="grey400"
                    >
                      <Text variant="pMediumBold" noWrap>
                        {tooltipMessage(t)[contractItem?.service?.status ?? '']?.title}
                      </Text>
                      <Text variant="pXSmallRegular">
                        {tooltipMessage(t)[contractItem?.service?.status ?? '']?.description}
                      </Text>
                    </Box>
                  </Tooltip>
                  <Box display="flex" flexDirection="column">
                    <Text variant="pMediumBold">{contractItem?.service?.name ?? ''}</Text>
                    <Text variant="pMediumRegular">{contractItem?.service?.nickname ?? ''}</Text>
                  </Box>
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span6' }} hiddenOn={['lg', 'xl']}>
                <Separator negativeSpace={3} />
              </GridItem>
              <GridItem
                gridColumn={
                  !hasCheckmark
                    ? { sm: 'span5', lg: 'span3', xl: 'span3' }
                    : { sm: 'span4', lg: 'span3', xl: 'span2' }
                }
              >
                <Text variant="pMediumBold">{contractItem?.variant?.name ?? ''}</Text>
                <Text variant="pSmallBold" color="orange">
                  {contractItem?.variant?.id === 'ljos-alltsaman-endalausgb' ||
                  'askrift-alltsaman-endalausgb'
                    ? 'Ótakmarkað'
                    : '500 Gb'}
                </Text>
              </GridItem>
              <GridItem
                gridColumn={{ sm: 'span2' }}
                hiddenOn={hasCheckmark ? ['sm', 'md', 'lg'] : ['sm', 'md', 'lg', 'xl']}
              >
                <Box display="flex" flexDirection="column" marginLeft={3}>
                  <Text variant="pMediumBold">{t('alltSaman.included')}</Text>
                  <Text variant="pSmallRegular">
                    {t('alltSaman.extraCost')}
                    {''} 0 kr.
                  </Text>
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span2' }} hiddenOn={['sm', 'md']}>
                <Pill text={pillText ?? ''} color="grey200" />
              </GridItem>
              <GridItem gridColumn={{ sm: hasCheckmark ? 'span2' : 'span1', lg: 'span1' }}>
                <Box display="flex" justifyContent="flex-end">
                  {hasCheckmark ? (
                    <ListButton
                      wrapper={(children) => (
                        <Link
                          passHref
                          href={`/beta/${customerId}/thjonustur/${contractItem?.service?.id}`}
                          legacyBehavior
                        >
                          {children}
                        </Link>
                      )}
                      icon="longArrowRight"
                    />
                  ) : (
                    <Menu
                      color="orange"
                      label="Menu"
                      items={items(contractItem?.service?.id ?? '')}
                      disclosure={
                        <IconButton
                          color="black100"
                          icon="dotsVertical"
                          hiddenButtonText="Action button"
                        />
                      }
                    />
                  )}
                </Box>
              </GridItem>
            </Grid>
          </ListBase>
          {contractItem.creditControlSettings?.map(
            (creditControlSetting: CreditControlSettings | null) =>
              creditControlSetting?.canToggle && (
                <Box backgroundColor="white" paddingY={1} key={creditControlSetting?.id}>
                  <SwitchBanner
                    color={color}
                    isOn={creditControlSetting?.isToggledOn ?? false}
                    switchInformationText="Aukakostnaður"
                    onToggle={() => toggleCreditControl(creditControlSetting)}
                    tooltip={{
                      children: (
                        <CardBase borderColor="grey200" dottedShadow="none" hasBorder>
                          <Box padding={2}>
                            <Text marginBottom={1} variant="pSmallBold">
                              Hér getur þú kveikt eða slökkt á aukakostnaði
                            </Text>
                            <Text marginBottom={1} variant="pXSmallRegular">
                              Ef þú vilt
                            </Text>
                          </Box>
                        </CardBase>
                      ),
                      placement: 'bottom-end',
                      shouldShowOnHover: true,
                    }}
                  />
                </Box>
              ),
          )}
        </Box>
      ))}
    </>
  );
};

export default BundleContainerList;