import { type FC } from 'react';

import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import CoverPicture from 'src/pages/dashboard/serviceManagement/general/CoverPicture';
import { type ServiceItem } from 'src/pages/dashboard/serviceManagement/types';

import EllipsisTooltip from 'src/components/EllipsisTooltip';

const DESCRIPTION_MAX_LENGTH = 90;

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

const CatalogItemCard: FC<CatalogItemCardProps> = ({
  catalogItem,
  onClickAction,
}) => {
  return (
    <Grid
      item
      xs={12}
      sm={6}
      md={4}
      key={catalogItem.id}
    >
      <CardContainer
        sx={{ p: 0, '& .MuiPaper-root': { height: '184px' } }}
        fullWidth
        padding={0}
        onClick={onClickAction}
      >
        <Stack
          sx={{
            height: '184px',
            width: 1,
          }}
        >
          <CoverPicture serviceItem={catalogItem} />
          <Stack sx={{ p: 2 }}>
            <EllipsisTooltip title={catalogItem.name}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                noWrap
                sx={{
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  color: ({ palette }) => palette.new.text.neutral.default,
                }}
              >
                {catalogItem.name}
              </Typography>
            </EllipsisTooltip>
            <Typography
              variant="globalXS"
              sx={{
                display: '-webkit-box',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                color: ({ palette }) => palette.new.text.neutral.lighter,
              }}
            >
              {catalogItem.description?.length > DESCRIPTION_MAX_LENGTH
                ? `${catalogItem.description?.slice(0, DESCRIPTION_MAX_LENGTH)}...`
                : catalogItem.description}
            </Typography>
          </Stack>
        </Stack>
      </CardContainer>
    </Grid>
  );
};

export default CatalogItemCard;
