// import { useGlobals } from "../../hooks/useGlobals";
import { Button, Card, message } from "antd";
import BackIcon from "components/Icons/BackIcon";
import CancelIcon from "components/Icons/CancelIcon";
import CancelPopupIcon from "components/Icons/CancelPopupIcon";
import NextIcon from "components/Icons/NextIcon";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { useCancelOrderMutation } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "../ProText";
import ProTitle from "../ProTitle";
import styles from "./CustomBottomSheet.module.css";

export function CancelOrderBottomSheet() {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { orderId } = useParams();

  const [cancelOrder] = useCancelOrderMutation();

  const handleCancelOrder = () => {
    setIsOpen(false);
    cancelOrder({
      orderID: orderId || "",
    }).then((res: any) => {
      if (res.error) {
        message.error(res.error.data.message);
      } else {
        message.success(res.data.message);
      }
    });
  };

  const handleKeepOrder = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Card className={styles.homeServiceCard} onClick={() => setIsOpen(true)}>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            marginTop: 1,
          }}
        >
          <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
            <CancelIcon />

            <ProTitle
              level={5}
              style={{
                marginTop: 1,
                fontSize: 14,
                color: "#ea1f22",
              }}
            >
              {t("order.cancelOrder")}
            </ProTitle>
          </div>

          {isRTL ? (
            <BackIcon className={styles.serviceIcon} />
          ) : (
            <NextIcon className={styles.serviceIcon} />
          )}
        </div>
      </Card>

      <ProBottomSheet
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title={t("order.cancelOrder")}
        showCloseButton={false}
        initialSnap={1}
        height={350}
        snapPoints={[350]}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
            marginTop: 15,
          }}
        >
          <CancelPopupIcon />

          <ProText
            style={{
              fontSize: "1rem",
            }}
          >
            {t("order.areYouSureYouWantToCancelThisOrder?")}
          </ProText>

          <ProText
            type="secondary"
            style={{
              fontSize: 14,
              marginBottom: 10,
            }}
          >
            {t("order.thisActionCannotBeUndone")}
          </ProText>

          <div
            style={{
              display: "flex",
              flexDirection: "row",
              gap: 10,
              width: "100%",
            }}
          >
            <Button
              type="primary"
              style={{ width: "100%", height: 48, color: "#FFF" }}
              onClick={handleKeepOrder}
            >
              {t("order.keepOrder")}
            </Button>

            <Button
              type="primary"
              style={{
                width: "100%",
                height: 48,
                color: "#ea1f22",
                borderColor: "#ea1f22",
                backgroundColor: "#fff",
              }}
              onClick={handleCancelOrder}
            >
              {t("order.cancelOrder")}
            </Button>
          </div>
        </div>
      </ProBottomSheet>
    </>
  );
}