import { FC } from 'react';
import { useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { SegmentationItemCheckbox } from './SegmentationItemCheckbox';
import { SegmentationDataMapped } from './SegmentationsData';

type Props = {
  segmentations: SegmentationDataMapped[];
};

export const SegmentationsContent: FC<Props> = ({ segmentations }) => {
  const { t } = useLokaliseTranslation('audience');

  const { setValue, watch } = useFormContext();

  const segmentationItemIds = watch('segmentationItemIds');

  return (
    <>
      {segmentations.map((segmentation, i) => {
        const segmentationsOptions = segmentation.items.map((item, index) => {
          return (
            <SegmentationItemCheckbox
              item={item}
              key={index}
              segmentation={segmentation}
            />
          );
        });

        const segmentationHasItems = segmentation.items.length > 0;

        const totalItemsCount = {
          count: segmentationItemIds[segmentation.id]?.length || 0,
          total: segmentation.items.length,
        };

        const areAllItemsSelected = () => {
          return (
            segmentation.items.length ===
            segmentationItemIds[segmentation.id]?.length
          );
        };

        const onHandleChangeAllItems = () => {
          const allItemsSelected = areAllItemsSelected();
          setValue('segmentationItemIds', {
            ...segmentationItemIds,
            [segmentation.id]: allItemsSelected
              ? []
              : segmentation.items.map(item => item.id),
          });
        };

        return (
          <HuAccordion
            key={i}
            title={segmentation.name}
            description={
              segmentationHasItems
                ? t('segmentations.selected_items', {
                    ...totalItemsCount,
                  })
                : undefined
            }
            elevation={0}
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.layout.default,
              minHeight: 74,
              mb: 0,
              '& .MuiStack-root': { pt: 0 },
            }}
            customDetail={
              <>
                {segmentationHasItems && (
                  <HuCardContainer fullWidth>
                    <Stack sx={{ gap: 4 }}>
                      <HuCheckbox
                        label={t('general:select_all')}
                        checked={areAllItemsSelected() || false}
                        onChange={onHandleChangeAllItems}
                      />
                      {segmentationsOptions}
                    </Stack>
                  </HuCardContainer>
                )}
                {!segmentationHasItems && (
                  <HuCardContainer fullWidth>
                    <HuTitle
                      title={t('segmentations.no_options_available')}
                      variant="S"
                      description={t('segmentations.no_segmentation_items')}
                    />
                  </HuCardContainer>
                )}
              </>
            }
          />
        );
      })}
    </>
  );
};