import { FC } from 'react';

import { TablerIcon } from '@material-hu/icons/tabler';
import ListItemButton from '@material-hu/mui/ListItemButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuList from '@material-hu/components/design-system/List';

import { ParentOptions } from './PostInsights';

type InsightsAnchorItem = {
  id: number;
  title: string;
};

type InsightsAnchorGroup = {
  id: ParentOptions;
  title: string;
  Icon: TablerIcon;
  items: InsightsAnchorItem[];
};

export type InsightsAnchorOptions = InsightsAnchorGroup[];

type InsightsAnchorMenuProps = {
  options: InsightsAnchorOptions;
  optionSelected: number;
  parentOptionSelected: string;
  onClick: (optionId: number, parentId: ParentOptions) => void;
};

const InsightsAnchorMenu: FC<InsightsAnchorMenuProps> = props => {
  const { options, optionSelected, parentOptionSelected, onClick } = props;
  const theme = useTheme();

  return (
    <Stack>
      {options.map(option => {
        return (
          <HuAccordion
            key={option.id}
            avatar={{
              Icon: option.Icon,
              color: 'primary',
            }}
            defaultExpanded={option.id === parentOptionSelected}
            elevation={0}
            title={option.title}
            customDetail={
              <HuList>
                {option.items.map(item => {
                  const isSelected =
                    optionSelected === item.id &&
                    parentOptionSelected === option.id;
                  const itemColor = isSelected
                    ? theme.palette.new.text.neutral.default
                    : theme.palette.new.text.neutral.lighter;
                  return (
                    <ListItemButton
                      key={item.id}
                      sx={{
                        mb: 1,
                        borderRadius: theme.shape.borderRadiusL,
                        backgroundColor: isSelected
                          ? theme.palette.new.background.elements.grey
                          : 'transparent',
                        '&:hover': {
                          backgroundColor:
                            theme.palette.new.background.elements.grey,
                        },
                      }}
                      onClick={() => onClick(item.id, option.id)}
                    >
                      <Typography
                        variant="globalS"
                        fontWeight="fontWeightSemiBold"
                        sx={{ color: itemColor }}
                      >
                        {item.title}
                      </Typography>
                    </ListItemButton>
                  );
                })}
              </HuList>
            }
          />
        );
      })}
    </Stack>
  );
};

export default InsightsAnchorMenu;