import { type FC } from 'react';

import { IconChevronRight, type TablerIcon } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTitle from '@material-hu/components/design-system/Title';

import {
  CATEGORY_ICONS,
  DEFAULT_CATEGORY_ICON,
} from 'src/constants/serviceManagement';
import { type ServiceItem } from 'src/pages/dashboard/serviceManagement/types';

export type CatalogItemListProps = {
  catalogItem: ServiceItem;
  onClickAction: () => void;
};

const CatalogItemList: FC<CatalogItemListProps> = ({
  catalogItem,
  onClickAction,
}) => {
  const IconComponent = catalogItem.category
    ? CATEGORY_ICONS[catalogItem.category.icon]?.Icon
    : DEFAULT_CATEGORY_ICON;

  return (
    <Stack
      onClick={onClickAction}
      sx={{
        borderRadius: ({ shape }) => shape.borderRadiusL,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: 1,
        cursor: 'pointer',
        border: ({ palette }) =>
          `1px solid ${palette.new.border.neutral.default}`,
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        p: 2,
        gap: 1,
        '&:hover': {
          backgroundColor: ({ palette }) =>
            palette.new.background.elements.grey,
        },
      }}
    >
      <HuAvatar
        Icon={IconComponent as TablerIcon}
        color="primary"
        size="medium"
      />
      <Stack
        sx={{
          flex: 1,
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
        }}
      >
        <HuTitle
          title={catalogItem.name}
          variant="S"
          description={catalogItem.description}
          withEllipsis
          overflow="tooltip"
          sx={{ '& .MuiTypography-root': { textOverflow: 'ellipsis' } }}
        />
      </Stack>

      <IconButton>
        <IconChevronRight size={24} />
      </IconButton>
    </Stack>
  );
};

export default CatalogItemList;
