import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

export type TicketStatusType =
  | 'new'
  | 'open'
  | 'pending'
  | 'hold'
  | 'solved'
  | 'closed';

export type MUIColorType =
  | 'error'
  | 'warning'
  | 'success'
  | 'default'
  | 'primary'
  | 'secondary'
  | 'info';

interface TicketStatusChipsProps {
  type: TicketStatusType;
}

const colorMap: {
  [key in TicketStatusType]: MUIColorType;
} = {
  new: 'error',
  open: 'error',
  pending: 'warning',
  hold: 'warning',
  solved: 'success',
  closed: 'default',
};

// zendesk: "new", "open", "pending", "hold", "solved", or "closed"
// MUI: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
export default function TicketStatusChips(props: TicketStatusChipsProps) {
  const { type } = props;

  const calculateColorCallback = React.useCallback(
    (type: TicketStatusType): MUIColorType => {
      return colorMap[type];
    },
    []
  );

  return (
    <Chip size="small" label={type} color={calculateColorCallback(type)} />
  );
}