import { Button, Form, Switch } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
import { selectCart, updateUseLoyaltyPoints } from "features/order/orderSlice";
import ProText from "components/ProText";
import styles from "./EarnLoyaltyPointsCard.module.css";

export default function EarnLoyaltyPointsCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { useLoyaltyPoints } = useAppSelector(selectCart);

  return (
    <>
      <ProInputCard title={t("cart.loyalty")}>
        <Form.Item name="useLoyaltyPoints">
          <div className={styles.useLoyaltyPointsContainer}>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 4,
                width: "100%",
              }}
            >
              <ProText
                style={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#333333",
                }}
              >
                {t("cart.useLoyaltyPoints")}
              </ProText>

              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 12,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#777580",
                }}
              >
                {t(
                  "cart.applyYourAvailableRewardsToGetDiscountsOnItemsInYourCart",
                )}
              </ProText>
            </div>
            <Switch
              autoFocus={false}
              checked={useLoyaltyPoints}
              onClick={() => {
                dispatch(updateUseLoyaltyPoints(!useLoyaltyPoints));
              }}
            />
          </div>
        </Form.Item>
      </ProInputCard>
    </>
  );
}