import { useState } from 'react';

import ArrowDropUpIcon from '@material-hu/icons/material/ArrowDropUp';
import Accordion from '@material-hu/mui/Accordion';
import AccordionDetails from '@material-hu/mui/AccordionDetails';
import AccordionSummary, {
  AccordionSummaryProps,
} from '@material-hu/mui/AccordionSummary';
import Checkbox from '@material-hu/mui/Checkbox';
import FormControlLabel from '@material-hu/mui/FormControlLabel';
import Grid from '@material-hu/mui/Grid';
import Typography from '@material-hu/mui/Typography';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';

import CircularProgress from 'src/components/CircularProgress';

import { SegmentationForSelection } from './types';
import { formatSegmentationForSelection, changeSegmentation } from './utils';

type Props = {
  onChange?: (itemId: number) => void;
  selectedItems: number[];
  accordionSummaryProps?: AccordionSummaryProps;
  includeGroupSegmentation?: boolean;
  onChangeWithGroupSegmentation?: (newSegmentation: {
    itemId: number;
    groupId: number;
  }) => void;
  withUsersCount?: boolean;
  useAudienceApi?: boolean;
};

function SegmentationItems({
  onChange,
  accordionSummaryProps,
  selectedItems,
  includeGroupSegmentation = false,
  onChangeWithGroupSegmentation = () => null,
  withUsersCount = false,
  useAudienceApi = false,
}: Props) {
  const [segmentation, setSegmentation] = useState<SegmentationForSelection>(
    [],
  );

  const segmentationQuery = useSegmentationGroups(
    {
      onSuccess: data =>
        setSegmentation(formatSegmentationForSelection(data, selectedItems)),
    },
    withUsersCount,
    useAudienceApi,
  );

  const handleChange = (
    newSegmentation: { itemId: number; groupId: number },
    groupIndex: number,
    itemIndex: number,
    newChecked: boolean,
  ) => {
    if (includeGroupSegmentation) {
      onChangeWithGroupSegmentation(newSegmentation);
    } else {
      onChange?.(newSegmentation.itemId);
    }

    setSegmentation(
      changeSegmentation(segmentation, groupIndex, itemIndex, newChecked),
    );
  };

  return segmentationQuery.isLoading ? (
    <CircularProgress centered />
  ) : (
    <>
      {segmentation.map((group, groupIndex) => (
        <Accordion
          defaultExpanded={groupIndex === 0}
          square
          disableGutters
          key={group.id}
          slotProps={{ transition: { unmountOnExit: true } }}
        >
          <AccordionSummary
            expandIcon={<ArrowDropUpIcon />}
            {...accordionSummaryProps}
            sx={{
              backgroundColor: '#DFEDFF',
              '& .MuiAccordionSummary-content': {
                alignItems: 'center',
              },
              ...accordionSummaryProps?.sx,
            }}
          >
            <Typography
              variant="subtitle1"
              sx={{
                fontWeight: 'bold',
              }}
            >
              {group.name}
            </Typography>
            <Typography
              variant="subtitle2"
              sx={{ ml: 2 }}
            >
              ({group.checkedCount}/{group.count})
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Grid container>
              {group.items.map((item, itemIndex) => (
                <Grid
                  item
                  xs={12}
                  sm={6}
                  key={item.id}
                >
                  <FormControlLabel
                    control={
                      <Checkbox
                        checked={item.checked}
                        disabled={accordionSummaryProps?.disabled}
                        onChange={() =>
                          handleChange(
                            {
                              itemId: item.id,
                              groupId: group.id,
                            },
                            groupIndex,
                            itemIndex,
                            !item.checked,
                          )
                        }
                      />
                    }
                    label={item.name}
                  />
                </Grid>
              ))}
            </Grid>
          </AccordionDetails>
        </Accordion>
      ))}
    </>
  );
}

export default SegmentationItems;