import { PlusOutlined } from "@ant-design/icons";
import { Button, Grid } from "antd";
import { addItem } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import { Product } from "utils/types/appTypes";

const { useBreakpoint } = Grid;

export function AddToCart({ item }: { item: Product }) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { xs, sm } = useBreakpoint();

  const handleQuickAdd = (item: Product) => {
    dispatch(
      addItem({
        item: {
          id: item.id,
          name: item.name,
          price: item.price,
          image: item.image,
          description: item.description,
          variant: "None",
          extras: [],
          extrasgroup: [],
        },
        quantity: 1,
      })
    );
  };
  return (
    <Button
      shape="round"
      title="add"
      iconPosition="start"
      disabled={item.isHasVarint}
      icon={
        <PlusOutlined
          title="add"
          style={{
            position: "relative",
            top: "-1px",
          }}
        />
      }
      size={xs || sm ? "small" : "middle"}
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        handleQuickAdd(item);
      }}
      style={{
        position: "absolute",
        bottom: -10,
        [isRTL ? "right" : "left"]: xs || sm ? "5%" : "15%",
        zIndex: 1,
        width: xs || sm ? 82 : 100,
        height: xs || sm ? 32 : 44,
        fontSize: xs || sm ? "1rem" : 18,
        fontWeight: 600,
        border: 0,
        backgroundColor: item.isHasVarint
          ? "rgba(233, 233, 233, 1)"
          : colors.primary,
        color: "#FFF",
        // boxShadow:
        //   theme === "light"
        //     ? "0 2px 0 rgba(0,0,0,0.02)"
        //     : "0 2px 0 #6b6b6b",
      }}
    >
      {t("common.add")}
    </Button>
  );
}