import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import ProductDetailPage from "../page";
import { Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useAppSelector } from "redux/hooks";
import { useNavigate, useParams } from "react-router-dom";

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

export function ProductBottomSheet({
  isOpen,
  onClose,
}: ProductBottomSheetProps) {
  const { themeName } = useAppSelector((state) => state.theme);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const closeButtonStyle: React.CSSProperties = {
    color: themeName === "dark" ? "#ffffff" : "#4D5154",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: 8,
    borderRadius: "50%",
    backgroundColor: themeName === "dark" ? "rgba(54, 54, 54, 0.8)" : "#EDEEEE",
    border: `1px solid ${themeName === "dark" ? "#424242" : "transparent"}`,
    transition: "all 0.3s ease",
    cursor: "pointer",
    width: 30,
    height: 30,
    position: "absolute",
    top: 40,
    [isRTL ? "right" : "left"]: 16,
    zIndex: 1000,
  };

  const navigate = useNavigate();
  const productId = localStorage.getItem("productId");

  const redirectToProductPage = () => {
    if (productId) {
      navigate(`/${subdomain}/product/${productId}`);
      onClose();
    }
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      showCloseButton={true}
      initialSnap={1}
      height={"90vh"}
      snapPoints={["90vh"]}
      contentStyle={{ padding: 0 }}
    >
      <Button
        type="text"
        icon={<UploadOutlined />}
        onClick={redirectToProductPage}
        style={closeButtonStyle}
      />
      <ProductDetailPage onClose={onClose} />
    </ProBottomSheet>
  );
}