import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Grid, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { colors } from "../../ThemeConstants";
import styles from "./ActionsButtons.module.css";

const { useBreakpoint } = Grid;

export default function ActionsButtons({
  quantity,
  setQuantity,
  max,
  min,
}: {
  quantity: number;
  setQuantity: (quantity: number) => void;
  max?: number;
  min?: number;
}) {
  const { t } = useTranslation();
  const { xs } = useBreakpoint(); // Default to desktop
  const { isRTL } = useAppSelector((state) => state.locale); // Default to LTR

  const getPopconfirmOverlayStyle = () => ({
    width: xs ? "280px" : "auto",
    maxWidth: "320px",
    ".antPopconfirmMessageTitle": {
      fontSize: xs ? "14px" : "16px",
      paddingRight: xs ? "24px" : "0",
    },
    ".antPopconfirmMessageContent": {
      fontSize: xs ? "13px" : "14px",
      marginTop: "4px",
    },
    ".antPopconfirmButtons": {
      marginTop: "12px",
      ".ant-btn": {
        fontSize: xs ? "13px" : "14px",
        height: xs ? "28px" : "32px",
        padding: xs ? "0 12px" : "4px 15px",
      },
    },
  });

  return (
    <div className={styles.cartItemActions}>
      <div className={styles.quantityControls}>
        <div className={styles.quantityInputContainer}>
          {quantity > 0 ? (
            <Button
              shape="circle"
              iconPlacement="start"
              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
              size="small"
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
              className={styles.quantityButton}
              {...(min && { disabled: quantity === min })}
              style={{
                width: 28,
                height: 28,
                border: "none",
              }}
            />
          ) : (
            <Popconfirm
              title={t("cart.deleteConfirmation.title")}
              description={t("cart.deleteConfirmation.content")}
              onConfirm={() => setQuantity(0)}
              okText={t("cart.deleteConfirmation.confirm")}
              cancelText={t("cart.deleteConfirmation.cancel")}
              okButtonProps={{ danger: true }}
              placement={isRTL ? "left" : "right"}
              styles={{
                root: getPopconfirmOverlayStyle(),
              }}
            >
              <Button
                shape="circle"
                iconPlacement="start"
                icon={<DeleteIcon />}
                size="small"
                className={styles.addButton}
                style={{
                  background: "#FEF2F2",
                  width: 28,
                  height: 28,
                  border: "none",
                }}
              />
            </Popconfirm>
          )}
          <InputNumber
            min={min || 1}
            max={max || 100}
            value={quantity || 1}
            onChange={(value: number | null) => setQuantity(value || 1)}
            size="small"
            controls={false}
            className={styles.quantityInput}
            name="id"
          />
          <Button
            shape="circle"
            iconPlacement="start"
            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
            size="small"
            onClick={() => setQuantity(Math.min(100, quantity + 1))}
            className={styles.quantityButton}
            {...(max && { disabled: quantity >= max })}
            style={{
              backgroundColor: colors.primary,
              width: 28,
              height: 28,
              border: "none",
            }}
          />
        </div>
      </div>
    </div>
  );
}
