import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet";
import { colors } from "ThemeConstants";
import { Button, Card } from "antd";
import CarRatioGroups from "./CarRatioGroups/CarRatioGroups";
import PlusIcon from "components/Icons/PlusIcon";
import styles from "../checkout.module.css";
import { AddCarBottomSheet } from "components/CustomBottomSheet/AddCarBottomSheet";
import { updatePlateCar } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";

interface CarBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState<string | null>(null);
  const [isAddCarOpen, setIsAddCarOpen] = useState(false);
  const dispatch = useAppDispatch();

  const handleCancel = () => {
    setValue(null);
    onClose();
  };

  const handleSave = () => {
    dispatch(updatePlateCar(value || ""));
    onClose();
  };

  const handleAddCarClick = () => {
    setIsAddCarOpen(true);
  };

  const handleAddCarClose = () => {
    setIsAddCarOpen(false);
    // Reopen CarBottomSheet when AddCarBottomSheet closes
    // The parent component should handle reopening, but we'll ensure state is correct
  };

  const handleAddCarSave = () => {
    dispatch(updatePlateCar(value || ""));
    // After saving, close AddCarBottomSheet which will trigger reopening CarBottomSheet
    setIsAddCarOpen(false);
  };

  // Show AddCarBottomSheet when it's open, otherwise show CarBottomSheet
  if (isAddCarOpen) {
    return (
      <AddCarBottomSheet
        isOpen={isAddCarOpen}
        onClose={handleAddCarClose}
        onSave={handleAddCarSave}
      />
    );
  }

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("checkout.addCarDetails")}
      initialSnap={1}
      height={575}
      snapPoints={[575]}
    >
      <Card title={t("car.selectCar")} style={{ marginTop: 24 }}>
        <CarRatioGroups
          options={[
            {
              label: "",
              value: "7CAB1",
              price: "7CAB1",
            },
            {
              label: "Buy one get one free, Min order : SDG 5,000",
              value: "7CAB2",
              price: "7CAB2",
            },
            {
              label: "30% off on select items, Min order : SDG 15,000",
              value: "7CABO",
              price: "7CABO",
            },
          ]}
          value={value || undefined}
          onRatioClick={(value) => setValue(value)}
          optionsStyle={{
            fontSize: 12,
            fontWeight: 500,
            color: "#5F6C7B",
          }}
          valueStyle={{
            fontSize: 12,
            fontWeight: 500,
            color: colors.primary,
          }}
        />
        <Button
          style={{
            fontWeight: 600,
            fontStyle: "SemiBold",
            fontSize: 14,
            lineHeight: "140%",
            letterSpacing: 0,
            width: "100%",
            color: "#5F6C7B",
            marginTop: 16,
          }}
          onClick={handleAddCarClick}
          icon={
            <PlusIcon
              color="#5F6C7B"
              dimension="16"
              className={styles.plusIcon}
            />
          }
        >
          {t("car.addCar")}
        </Button>
      </Card>

      <div
        style={{
          display: "flex",
          gap: 12,
          marginTop: 20,
        }}
      >
        <Button
          type="primary"
          style={{
            flex: 1,
            boxShadow: "none",
            height: 48,
            width: "100%",
          }}
          onClick={handleSave}
          disabled={!value}
        >
          {t("checkout.save")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}