import { type FC } from 'react';

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

import TypographyOverflowTooltip from '@material-hu/components/composed-components/TypographyOverflowTooltip';

export type CategoryListItemProps = {
  name: string;
  Icon: TablerIcon;
  onClick: () => void;
  isActive: boolean;
};

const CategoryListItem: FC<CategoryListItemProps> = ({
  name,
  Icon,
  onClick,
  isActive,
}) => {
  const theme = useTheme();

  return (
    <Stack
      sx={{
        width: 1,
        px: 1,
        py: 1.5,
        gap: 1,
        flexDirection: 'row',
        alignItems: 'center',
        cursor: 'pointer',
        backgroundColor: ({ palette }) =>
          isActive
            ? palette.new.background.elements.grey
            : palette.new.background.layout.tertiary,
        borderRadius: ({ shape }) => shape.borderRadiusL,
        '&:hover': {
          backgroundColor: ({ palette }) =>
            palette.new.background.elements.grey,
          ...(!isActive && {
            '& .category-icon': {
              color: ({ palette }) => palette.new.text.neutral.lighter,
            },
            '& .category-text': {
              color: ({ palette }) => palette.new.text.neutral.lighter,
            },
          }),
        },
      }}
      onClick={onClick}
    >
      <Box
        className="category-icon"
        sx={{
          display: 'flex',
          flexShrink: 0,
          color: ({ palette }) => palette.new.text.neutral.default,
        }}
      >
        <Icon
          size={24}
          color="currentColor"
        />
      </Box>
      <Stack sx={{ minWidth: 0, flex: 1 }}>
        <TypographyOverflowTooltip
          typographyProps={{
            className: 'category-text',
            variant: 'globalS',
            fontWeight: 'fontWeightSemiBold',
            color: theme.palette.new.text.neutral.default,
          }}
          tooltipProps={{
            description: name,
          }}
        >
          {name}
        </TypographyOverflowTooltip>
      </Stack>
    </Stack>
  );
};

export default CategoryListItem;
