import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import CarIcon from "components/Icons/CarIcon";
import { Button, Card } from "antd";
import styles from "../checkout.module.css";
import { useState } from "react";
import { CarBottomSheet } from "./CarBottomSheet";

export function CarCard() {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
  const { plateCar } = useAppSelector((state) => state.order);

  return (
    <>
      <Card
        onClick={() => {
          setIsCarBottomSheetOpen(true);
        }}
      >
        <div className={styles.carCard}>
          <Button
            shape="circle"
            icon={<CarIcon />}
            style={{
              backgroundColor: "var(--background)",
              border: "none",
              width: 32,
              height: 32,
              minWidth: 32,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
            }}
          />
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              width: "100%",
            }}
          >
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 18,
                lineHeight: "140%",
                color: "#333333",
              }}
            >
              {t("checkout.addCarDetails")}
            </ProText>

            {plateCar ? (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  marginTop: 6,
                }}
              >
                <ProText
                  style={{
                    fontWeight: 400,
                    fontStyle: "Regular",
                    fontSize: 16,
                    lineHeight: "140%",
                    color: "#777580",
                  }}
                >{t("checkout.carPlateNumber")}:</ProText>
                <div
                  style={{
                    backgroundColor: "#FFC600",
                    color: "#333333",
                    padding: "3px 14px",
                    borderRadius: "20px",
                    fontSize: 15,
                    fontWeight: 600,
                    fontStyle: "SemiBold",
                    letterSpacing: "0.8px",
                    display: "inline-flex",
                    alignItems: "center",
                    boxShadow: "0 2px 6px rgba(255, 198, 0, 0.25)",
                    fontFamily: "monospace",
                  }}
                >
                  {plateCar}
                </div>
              </div>
            ) : (
              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 16,
                  lineHeight: "140%",
                  color: "#777580",
                }}
              >
                {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
              </ProText>
            )}
          </div>
          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
        </div>
      </Card>
      <CarBottomSheet
        isOpen={isCarBottomSheetOpen}
        onClose={() => setIsCarBottomSheetOpen(false)}
      />
    </>
  );
}