import { type MouseEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { IconButton, Stack, useTheme } from '@mui/material';
import { IconChevronUp } from '@tabler/icons-react';

import ListItem from '../../../../design-system/List/components/ListItem';
import { type SubSidebarCollapsableItemProps } from '../../types';

const SubSidebarCollapsableItem = ({
  id,
  currentValue,
  handleClickItem,
  items,
  depth = 1,
  ...item
}: SubSidebarCollapsableItemProps) => {
  const [open, setOpen] = useState(false);

  const { palette, shape, spacing } = useTheme();
  const { t } = useTranslation('material_hu_only');

  const hasChildren = (items?.length ?? 0) > 0;
  const showChildren = hasChildren && open;
  const isSelected = item.value === currentValue;

  const isChildSelected = (children?: typeof items): boolean => {
    if (!children || children.length === 0) return false;
    return children.some(
      child => child.value === currentValue || isChildSelected(child.items),
    );
  };

  const handleToggleOpen = (event: MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    setOpen(!open);
  };

  const sideContent = hasChildren ? (
    <Stack
      className="side-content-container"
      sx={{ position: 'relative' }}
    >
      <Stack
        className="side-content"
        sx={{ opacity: 1 }}
      >
        {item.sideContent}
      </Stack>
      <Stack
        className="open-action"
        sx={{ position: 'absolute', right: 0, top: 0, opacity: 0 }}
      >
        <IconButton
          aria-label={open ? t('sub_sidebar.close') : t('sub_sidebar.open')}
          onClick={handleToggleOpen}
          sx={{
            p: 0,
          }}
        >
          <IconChevronUp
            style={{
              transition: 'transform 0.2s ease-in-out',
              transform: open ? 'rotate(0deg)' : 'rotate(180deg)',
            }}
          />
        </IconButton>
      </Stack>
    </Stack>
  ) : (
    item.sideContent
  );

  let stackBgColor: string | undefined;
  let textColor: string | undefined;

  if (isSelected && depth > 1) {
    stackBgColor = 'inherit';
    textColor = palette.new.text.neutral.brand;
  } else if (isSelected && depth === 1) {
    stackBgColor = palette.new.background.layout.default;
    textColor = palette.new.text.neutral.brand;
  } else if (isChildSelected(items)) {
    stackBgColor = palette.new.background.layout.default;
    textColor = palette.new.text.neutral.brand;
  } else if (open) {
    stackBgColor = palette.new.background.layout.default;
    textColor = palette.new.text.neutral.default;
  }

  return (
    <Stack
      sx={{
        backgroundColor: stackBgColor,
        borderRadius: depth === 1 ? shape.borderRadiusL : undefined,
        overflow: 'hidden',
      }}
    >
      <ListItem
        {...item}
        id={id}
        onClick={handleClickItem(item.value, item.onClick)}
        selected={isSelected}
        sideContent={sideContent}
        sx={{
          ...item.sx,
          backgroundColor: 'inherit',
          color: textColor,
          '& .MuiAvatar-root': {
            color: textColor,
            backgroundColor: 'inherit',
          },
          '& .MuiTypography-root': {
            color: textColor,
          },
          '&:hover': {
            ...(hasChildren && {
              '& .side-content-container': {
                width: '24px',
                height: '24px',
              },
              '& .side-content-container > .side-content': {
                opacity: 0,
              },
              '& .side-content-container > .open-action': {
                opacity: 1,
              },
            }),
          },
          '& > .MuiButtonBase-root': {
            pl: spacing(2 * depth),
            borderRadius: depth === 1 ? shape.borderRadiusL : undefined,
            borderBottomLeftRadius: showChildren ? 0 : undefined,
            borderBottomRightRadius: showChildren ? 0 : undefined,
          },
        }}
      />
      {showChildren &&
        items?.map(child => (
          <SubSidebarCollapsableItem
            {...child}
            id={`${id}-item-${child.value}`}
            key={`${id}-item-${child.value}`}
            depth={depth + 1}
            currentValue={currentValue}
            handleClickItem={handleClickItem}
          />
        ))}
    </Stack>
  );
};

export default SubSidebarCollapsableItem;
