import { Button, Collapse, Stack, useTheme } from '@mui/material';

import Avatar from '../../../../design-system/Avatar';
import Tooltip from '../../../../design-system/Tooltip';
import { type SubSidebarInternalComponentsProps } from '../../types';

const SubSidebarAccordionsCollapsed = ({
  id,
  section,
  openAccordions,
  handleOpenAccordion,
  handleClickItem,
}: SubSidebarInternalComponentsProps) => {
  const { palette, transitions, spacing } = useTheme();
  const isAvatarEmojiType = Boolean(section.avatar?.text);

  return (
    <Stack
      id={`${id}-accordion-section-${section.value}`}
      key={`${id}-accordion-section-${section.value}`}
      sx={{ gap: 2, mt: 0.5, alignItems: 'start' }}
    >
      <Button
        onClick={() => handleOpenAccordion(section.value)}
        sx={{
          p: 0,
          minWidth: 0,
          '&:hover': {
            '& .MuiAvatar-root': {
              backgroundColor: palette.new.background.elements.default,
            },
          },
        }}
      >
        <Tooltip
          direction="right"
          title={section.title}
        >
          <span>
            <Avatar
              {...section.avatar}
              sx={{
                ...section.avatar?.sx,
                borderRadius: 1,
                '& img': {
                  maxWidth: spacing(2.5),
                  maxHeight: spacing(2.5),
                },
                ...(isAvatarEmojiType && {
                  '& span': {
                    fontSize: '1.3rem',
                    mt: 0.5,
                  },
                }),
              }}
            />
          </span>
        </Tooltip>
      </Button>
      <Collapse
        in={openAccordions.includes(section.value)}
        timeout={transitions.duration.short}
        sx={{
          '& .MuiCollapse-wrapperInner': {
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            pb: 2,
          },
        }}
      >
        {section.items.map(item => (
          <Button
            key={`${id}-accordion-section-${section.value}-item-${item.value}`}
            sx={{
              p: 0,
              minWidth: 0,
              ...(item.selected && {
                '& .MuiAvatar-root': {
                  backgroundColor: palette.new.background.layout.brand,
                  '& svg': {
                    stroke: palette.new.action.button.background.primary.hover,
                  },
                },
              }),
              '&:hover': {
                backgroundColor: 'transparent',
                ...(!item.disabled && {
                  '& .MuiAvatar-root': {
                    backgroundColor: palette.new.background.elements.default,
                  },
                }),
              },
            }}
            onClick={
              item.disabled
                ? undefined
                : handleClickItem(item.value, item.onClick)
            }
          >
            <Tooltip
              direction="right"
              title={item.text?.title || item.value}
            >
              <span>
                <Avatar
                  {...item.avatar}
                  disabled={item.disabled}
                />
              </span>
            </Tooltip>
          </Button>
        ))}
      </Collapse>
    </Stack>
  );
};

export default SubSidebarAccordionsCollapsed;
