import { Fragment } from 'react';

import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import { type ListItemProps } from '@material-hu/components/design-system/List/components/ListItem/types';

import useFormatDate from 'src/hooks/useFormatDate';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  type JourneyTaskDetail,
  JourneyTaskType,
  type SurveyTaskDetail,
} from '../../../types';
import { getExpiredPill } from '../../../utils';

type TaskInformationProps = {
  task?: JourneyTaskDetail;
  isLoading: boolean;
};

// TODO: Move this to a separate utils file.
const getSurveyStatusPill = (
  taskInfo: SurveyTaskDetail['taskInfo'],
  t: ReturnType<typeof useLokaliseTranslation>['t'],
): ListItemProps['sidePill'] => {
  if (!taskInfo.participantAdded) {
    return {
      label: t('journey_steps.pill_available'),
      type: 'info',
    };
  }

  if (!taskInfo.completed) {
    return {
      label: t('journey_steps.pill_in_progress'),
      type: 'warning',
    };
  }

  return {
    label: t('journey_steps.pill_completed'),
    type: 'success',
  };
};

export const TaskInformation = ({ task, isLoading }: TaskInformationProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { formatDate } = useFormatDate();
  const isTaskDone = task?.status === 'DONE';
  const expiredPill = getExpiredPill(task, t);

  const statusPill: ListItemProps['sidePill'] =
    task?.task?.type === JourneyTaskType.SURVEY
      ? getSurveyStatusPill((task as SurveyTaskDetail).taskInfo, t)
      : {
          label: t(
            `custom_task_detail.${isTaskDone ? 'completed' : 'pending'}`,
          ),
          type: isTaskDone ? 'success' : 'warning',
        };

  const items: ListItemProps[] = [
    {
      text: { title: t('custom_task_detail.status') },
      sidePill: statusPill,
    },
    ...insertIf(!!task?.expiresAfter, {
      text: { title: t('custom_task_detail.due_date') },
      sidePill: expiredPill ? expiredPill : undefined,
      sideText: {
        title: task?.expiresAfter ? formatDate(task?.expiresAfter!) : '',
      },
    }),
  ];

  return (
    <HuCardContainer
      fullWidth
      sx={{
        border: 'none',
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
        '& .MuiCardContent-root': {
          gap: 1.5,
          display: 'flex',
          flexDirection: 'column',
        },
      }}
    >
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
      >
        {t('custom_task_detail.details')}
      </Typography>

      <List
        sx={{
          borderRadius: 1.5,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.tertiary,
        }}
      >
        {items.map((item, index) => (
          <Fragment key={item.text?.title as string}>
            <ListItem
              key={item.text?.title as string}
              sx={{ '& .MuiListItem-root': { p: 1.5 } }}
              loading={isLoading}
              {...item}
            />
            {index !== items.length - 1 && <Divider sx={{ mx: 1.5 }} />}
          </Fragment>
        ))}
      </List>
    </HuCardContainer>
  );
};