import { MinusOutlined } from "@ant-design/icons";
import { Button, Grid, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";
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
              type="text"
              size="small"
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
              className={styles.quantityButton}
              {...(min && { disabled: quantity === min })}
            >
              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
            </Button>
          ) : (
            <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(),
                body: {
                  padding: xs ? "12px" : "16px",
                },
              }}
            >
              <Button
                type="text"
                size="small"
                danger
                icon={<DeleteIcon className={styles.deleteIcon} />}
                className={styles.removeButton}
              />
            </Popconfirm>
          )}
          <InputNumber
            min={min || 1}
            max={max || 100}
            value={quantity || 1}
            onChange={(value) => setQuantity(value || 1)}
            size="small"
            controls={false}
            className={styles.quantityInput}
            name="id"
          />
          <Button
            type="text"
            size="small"
            onClick={() => setQuantity(Math.min(100, quantity + 1))}
            className={styles.quantityButton}
            {...(max && { disabled: quantity >= max })}
          >
            <PlusIcon className={styles.plusIcon} />
          </Button>
        </div>
      </div>
    </div>
  );
}