import React, { useMemo } from "react";

import {
  Cancel,
  CheckCircle,
  LocalShipping,
  NewReleases,
  VolunteerActivism,
} from "@mui/icons-material";
import Chip, { ChipProps } from "@mui/material/Chip";
import useTheme from "@mui/material/styles/useTheme";

import { OrderStateType } from "../../types/order";

type OrderStateChipProps<T> = {
  element: T;
} & ChipProps;

const OrderStateChip = <T extends { state: OrderStateType }>(props: OrderStateChipProps<T>) => {
  const theme = useTheme();
  const {
    element: { state },
    ...rest
  } = props;

  const color = useMemo(() => {
    const colorMap: Record<OrderStateType, ChipProps["color"]> = {
      PENDING: "default",
      CANCELLED: "error",
      CONFIRMED: "info",
      SENT: "info",
      IN_TRANSIT: "info",
      READY_FOR_PICKUP: "primary",
      DELIVERED: "success",
    };

    return colorMap[state];
  }, [state, theme]);

  const label = useMemo(() => {
    const labelMap: Record<OrderStateType, string> = {
      PENDING: "NEW",
      CANCELLED: "CANCELLED",
      CONFIRMED: "CONFIRMED",
      SENT: "SENT",
      IN_TRANSIT: "IN TRANSIT",
      READY_FOR_PICKUP: "READY FOR PICKUP",
      DELIVERED: "DELIVERED",
    };

    return labelMap[state];
  }, [state, theme]);

  const icon = useMemo(() => {
    const iconMap: Record<OrderStateType, JSX.Element> = {
      PENDING: <NewReleases fontSize="small" />,
      CANCELLED: <Cancel fontSize="small" />,
      CONFIRMED: <CheckCircle fontSize="small" />,
      SENT: <LocalShipping fontSize="small" />,
      IN_TRANSIT: <LocalShipping fontSize="small" />,
      READY_FOR_PICKUP: <VolunteerActivism fontSize="small" />,
      DELIVERED: <CheckCircle fontSize="small" />,
    };

    return iconMap[state];
  }, [state, theme]);

  return (
    <Chip
      {...rest}
      color={color}
      icon={icon}
      label={label}
      sx={{ ...rest.sx, paddingLeft: 0.75 }}
    />
  );
};

export default OrderStateChip;