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

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

import {
  isGoalDraftStatus,
  isGoalFinishedStatus,
  isGoalInProgressStatus,
} from 'src/pages/dashboard/goals/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type GoalStatusPillProps = {
  goalStatus: string;
};

const getPillLabelAndType = (goalStatus: string) => {
  if (isGoalInProgressStatus(goalStatus)) {
    return { pillLabelKey: 'status.in_progress', pillType: 'warning' as const };
  }
  if (isGoalDraftStatus(goalStatus)) {
    return { pillLabelKey: 'status.draft', pillType: 'info' as const };
  }
  if (isGoalFinishedStatus(goalStatus)) {
    return { pillLabelKey: 'status.finished', pillType: 'success' as const };
  }
  return null;
};

const GoalStatusPill = ({ goalStatus }: GoalStatusPillProps) => {
  const { t } = useLokaliseTranslation('goals');
  const pillConfig = getPillLabelAndType(goalStatus);
  const pillLabel = pillConfig ? t(pillConfig.pillLabelKey) : '';

  return (
    <Stack sx={{ width: '92px' }}>
      {pillConfig && (
        <HuPills
          hasIcon={false}
          size="small"
          label={pillLabel}
          type={pillConfig.pillType}
        />
      )}
    </Stack>
  );
};

export default GoalStatusPill;
