// import { useGlobals } from "../../hooks/useGlobals";
import { Button, Card } 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 { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "../ProText";
import ProTitle from "../ProTitle";
import styles from "./CustomBottomSheet.module.css";

interface CancelOrderBottomSheetProps {
  initialValue?: string;
  onSave?: (value: string) => void;
}

export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const isRTL = false; // Default to LTR

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

  const handleCancel = () => {
    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={handleCancel}
        title={t("order.cancelOrder")}
        showCloseButton={false}
        initialSnap={1}
        height={"45vh"}
        snapPoints={["40vh"]}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
          }}
        >
          <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: 50, color: "#FFF" }}
              onClick={handleSave}
            >
              {t("order.keepOrder")}
            </Button>

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