import React, { useMemo } from "react";

import BentoOutlinedIcon from "@mui/icons-material/BentoOutlined";
import HomeWorkOutlinedIcon from "@mui/icons-material/HomeWorkOutlined";
import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
import StoreOutlinedIcon from "@mui/icons-material/StoreOutlined";
import Chip, { ChipProps } from "@mui/material/Chip";
import useTheme from "@mui/material/styles/useTheme";

import { OrderDestinationType, OrderDetail } from "../../types/order";

export interface OrderDestinationChipProps extends ChipProps {
  element: OrderDetail;
}

const OrderDestinationChip: React.FC<OrderDestinationChipProps> = (props) => {
  const theme = useTheme();
  const {
    element: { destination_type },
    ...rest
  } = props;

  const color = useMemo(() => {
    const colorMap: Record<OrderDestinationType, ChipProps["color"]> = {
      HOME: "info",
      LOCKER: "info",
      SERVICE_POINT: "info",
      STORE: "info",
    };

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

  const label = useMemo(() => {
    const labelMap: Record<OrderDestinationType, string> = {
      HOME: "HOME",
      LOCKER: "LOCKER",
      SERVICE_POINT: "SERVICE POINT",
      STORE: "STORE PICKUP",
    };

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

  const icon = useMemo(() => {
    const iconMap: Record<OrderDestinationType, JSX.Element> = {
      HOME: <HomeWorkOutlinedIcon fontSize="small" />,
      LOCKER: <BentoOutlinedIcon fontSize="small" />,
      SERVICE_POINT: <StorefrontOutlinedIcon fontSize="small" />,
      STORE: <StoreOutlinedIcon fontSize="small" />,
    };

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

  return (
    <Chip
      {...rest}
      color={color}
      icon={icon}
      label={label}
      size="small"
      sx={{ ...rest.sx, pl: 0.5, borderWidth: 1.5 }}
      variant="outlined"
    />
  );
};

export default OrderDestinationChip;