import CardContainer from '@design-system/CardContainer';
import Pill from '@design-system/Pills';
import Title from '@design-system/Title';
import Tooltip from '@design-system/Tooltip';
import { IconButton, Stack, Typography } from '@mui/material';
import { merge } from 'lodash';

import {
  type BaseQuestionType,
  type QuestionListItemProps,
  type SlotProps,
} from './types';

const QuestionListItem = <TQuestion extends BaseQuestionType>({
  item: question,
  dragHandleButton,
  actions,
  pillLabel,
  slotProps: receivedSlotProps,
  getTypeDescription,
  showIndex = false,
  index,
}: QuestionListItemProps<TQuestion>) => {
  const slotProps = merge<{}, SlotProps, SlotProps | undefined>(
    {},
    {
      pill: {
        type: 'highlight',
        hasIcon: false,
        size: 'small',
      },
    },
    receivedSlotProps,
  );
  return (
    <CardContainer
      sx={{ boxSizing: 'border-box' }}
      fullWidth
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          gap: 0.5,
          alignItems: 'center',
        }}
      >
        {showIndex && (
          <Typography
            component={Stack}
            sx={{
              width: 20,
              height: 20,
              borderRadius: '50%',
              backgroundColor: theme => theme.palette.ilustrations?.primaryIlus,
              color: theme => theme.palette.common.white,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 12,
              fontWeight: 'fontWeightSemiBold',
              p: 0.25,
              boxSizing: 'border-box',
            }}
          >
            {index + 1}
          </Typography>
        )}
        {dragHandleButton}
        <Title
          title={question.statement}
          description={getTypeDescription?.(question) ?? ''}
          sx={{ flex: 1 }}
          withEllipsis
        />
        {pillLabel && (
          <Pill
            label={pillLabel}
            {...slotProps.pill}
          />
        )}
        {actions?.map(action => (
          <Tooltip
            key={action.name}
            description={action.name}
            delay={500}
          >
            <IconButton onClick={action.onClick}>{action.icon}</IconButton>
          </Tooltip>
        ))}
      </Stack>
    </CardContainer>
  );
};

export default QuestionListItem;