"use client";
import React, { useState, useEffect } from "react";
import { UploadOutlined } from "@ant-design/icons";
import { Image, Upload } from "antd";
import { saveProduct } from "@/store/product/actions";
import Link from "next/link";
import { useLocale } from "next-intl";
import type { GetProp, UploadFile, UploadProps } from "antd";
import { fetchPrescriptionSuccess } from "@/store/cart/actions";
import { useDispatch, useSelector } from "react-redux";
import { useTranslations } from "next-intl";

type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

const getBase64 = (file: FileType): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

export default function Prescriptions({ products }: { products?: any[] }) {
  const { prescriptions } = useSelector((state: { Cart: any }) => state.Cart);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [fileList, setFileList] = useState<UploadFile[]>(prescriptions || []);
  const dispatch = useDispatch();
  const t = useTranslations();
  const locale = useLocale();
   const {
    
    selectedBranch,
  } = useSelector((state: { Address: any }) => state.Address);
  // Handle preview in Ant Design modal
  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as FileType);
    }
    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);
  };

  // Handle file changes (Upload)
  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
    dispatch(fetchPrescriptionSuccess(newFileList)); // Update Redux store
  };

  // Handle file removal
  const handleRemove = (file: UploadFile) => {
    setFileList((prevFileList) => {
      const updatedFileList = prevFileList.filter(
        (item) => item.uid !== file.uid
      );
      dispatch(fetchPrescriptionSuccess(updatedFileList)); // Dispatch action after delete
      return updatedFileList;
    });
  };

  // Track fileList updates
  // useEffect(() => {
  //   console.log("Updated fileList:", fileList);
  // }, [fileList]); // Logs after state updates

  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <UploadOutlined className="text-[24px]" />
      <div style={{ marginTop: 8 }}>{t("uplaod")}</div>
    </button>
  );

  return (
    <div>
      <div className="mb-8">
        <p className=" text-[18px] md:text-[24px] font-bold">
          {t("upload-prescription")}
        </p>
        <p className="text-[#8C8C8C] text-[12px] md:text-[16px]">
          {t("complete-order-upload-prescription")}
        </p>
      </div>
      <div className="flex flex-col md:flex-row justify-between gap-4 ">
        <div>

        {selectedBranch?.product_availability
          ?.filter(
            (item: any) =>
              item?.requires_prescription === 1 && item?.is_available === 1
          )
          .map((item: any, index: any) => (
              <div
                key={index}
                className="cart-product flex justify-between items-center py-4 border-solid border-b-[1px] border-gray-300 h-fit"
              >
                <div className="flex items-center justify-start ">
                  <div className=" flex items-center justify-start">
                    <div
                      onClick={() => dispatch(saveProduct(item))}
                      className="relative p-2 bg-[#F1FBFF]"
                    >
                      {/* <img
                                          src={item?.image}
                                          className="h-[60px] w-[60px] sm:w-[80px] sm:h-[80px] mx-auto "
                                        /> */}
                      <Image
                        src={item?.product_image}
                        width={70}
                        height={70}
                        alt=""
                        //className="h-[60px] w-[60px] sm:w-[80px] sm:h-[80px] mx-auto "
                      />
                      <Link
                        href={`/${locale}/products/${(item?.product_name)
                          .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                          .replace(/^-+|-+$/g, "")
                          .toLowerCase()}`}
                        locale={false}
                        className="absolute w-full  h-full top-0 left-0 z-[40] "
                      ></Link>
                    </div>
                  </div>
                  <div className="px-2">
                    <div
                      className="relative"
                      onClick={() => dispatch(saveProduct(item))}
                    >
                      <Link
                        href={`/${locale}/products/${(item?.product_name)
                          .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                          .replace(/^-+|-+$/g, "")
                          .toLowerCase()}`}
                        locale={false}
                        className="absolute w-full  h-full top-0 left-0 z-[40] "
                      ></Link>
                      <p className="text-third line-clamp-1">{item?.product_name}</p>
                    </div>

                    <div className="flex sm:hidden w-fit justify-between items-center text-gray-400">
                      (
                      <div className="flex items-center gap-1 justify-between ">
                        <div className="flex flex-wrap items-center justify-center text-[12px] sm:text-[13px] text-gray-400 ">
                          <p className="text-[12px]">{t("exc-vat")}</p>
                          <div className="flex justify-between items-center">
                            <span className="text-primary mx-1">
                              {Number(item?.price_before).toFixed(2)}
                            </span>{" "}
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </div>
                        </div>
                        <div className="w-[1px] h-[15px] bg-gray-400" />
                        {/* <p className="text-gray-400 text-[12px] sm:text-[13px] ms-1">
                                            {t("Vat")}
                                            <span className="text-primary ms-1">
                                              {item.tax}%
                                            </span>
                                          </p> */}
                        <div className="flex flex-wrap text-[12px] sm:text-[13px] text-gray-400 ">
                          <p className="!m-0 !p-0 text-[12px]">{t("Vat")}</p>
                          <span className="text-primary mx-1">
                            {item.tax}%
                          </span>{" "}
                        </div>
                      </div>
                      )
                    </div>
                  </div>
                </div>
                <div className="text-center ">
                  <div className="flex justify-center items-center">
                    <p className="text-[18px] md:text-[20px] text-primary text-center">
                      {item?.product_price}
                      {/* {t("sar")} */}
                    </p>
                    <span className="inline-block ">
                      <Image
                        src={"/images/ryial.svg"}
                        alt="currancy icon"
                        width={12}
                        height={12}
                        className="ms-1"
                      />
                    </span>
                  </div>

                  <div className="sm:flex hidden w-fit justify-between items-center text-gray-400">
                    (
                    <div className="flex items-center justify-between ">
                      <div className="flex   text-[12px] sm:text-[13px] text-gray-400 ">
                        <p className="flex items-center text-[12px]">
                          {t("exc-vat")}
                        </p>
                        <div className="flex justify-between items-center">
                          <span className="text-primary mx-1">
                            {Number(item?.price_before).toFixed(2)}
                          </span>{" "}
                          <Image
                            src={"/images/ryial.svg"}
                            alt="currancy icon"
                            width={12}
                            height={12}
                            className="ms-1"
                          />
                        </div>
                      </div>
                      <div className="w-[1px] h-[15px] bg-gray-400" />
                      <p className="text-gray-400 text-[12px]  ms-1">
                        {t("Vat")}
                        <span className="text-primary ms-1">{item.tax}%</span>
                      </p>
                    </div>
                    )
                  </div>
                  {item?.offer_price && (
                    <div className="flex justify-center items-center">
                      <p className="line-through text-third text-center text-[14px] py-1">
                        {item?.offer_price +
                        (
                          <span className="inline-block mx-1">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        )}
                      </p>
                      <p className="text-[#ff0000] p-2 text-center text-[14px] ">
                        {item?.offer_title}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            )
          )}
        </div>
        <div className="flex flex-col items-center justify-center flex-grow flex-wrap min-w-[170px] md:max-w-[50%] mt-[30px] sm:mt-0">
          <Upload
            listType="picture-card"
            fileList={fileList}
            onPreview={handlePreview}
            onChange={handleChange}
            onRemove={handleRemove}
            beforeUpload={() => false}
          >
            {fileList.length >= 6 ? null : uploadButton}
          </Upload>

          {/* Ant Design Image Preview Modal */}
          {previewImage && (
            <Image
              wrapperStyle={{ display: "none" }}
              key={previewImage}
              preview={{
                visible: previewOpen,
                onVisibleChange: (visible) => setPreviewOpen(visible),
                afterOpenChange: (visible) => !visible && setPreviewImage(""),
              }}
              src={previewImage}
            />
          )}
        </div>
      </div>
    </div>
  );
}

// "use client";
// import React, { useState, useEffect } from "react";
// import { UploadOutlined } from "@ant-design/icons";
// import { Image, Upload, Button, message } from "antd";
// import type { GetProp, UploadFile, UploadProps } from "antd";
// import { fetchPrescriptionSuccess } from "@/store/cart/actions";
// import { useDispatch, useSelector } from "react-redux";
// import axios from "axios";
// import { useMutation } from "@tanstack/react-query";

// type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

// const getBase64 = (file: FileType): Promise<string> =>
//   new Promise((resolve, reject) => {
//     const reader = new FileReader();
//     reader.readAsDataURL(file);
//     reader.onload = () => resolve(reader.result as string);
//     reader.onerror = (error) => reject(error);
//   });

// export default function Prescriptions() {
//   const [previewOpen, setPreviewOpen] = useState(false);
//   const [previewImage, setPreviewImage] = useState("");
//   const [fileList, setFileList] = useState<UploadFile[]>([]);
//   const dispatch = useDispatch();

//   const handlePreview = async (file: UploadFile) => {
//     if (!file.url && !file.preview) {
//       file.preview = await getBase64(file.originFileObj as FileType);
//     }
//     setPreviewImage(file.url || (file.preview as string));
//     setPreviewOpen(true);
//   };

//   const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
//     const validFiles = newFileList
//       .filter((file) => file.originFileObj)
//       .map((file) => file.originFileObj); // Store only File objects in Redux

//     setFileList(newFileList);
//     dispatch(fetchPrescriptionSuccess(validFiles));
//   };

//   const handleRemove = (file: UploadFile) => {
//     setFileList((prevFileList) => {
//       const updatedFileList = prevFileList.filter((item) => item.uid !== file.uid);
//       dispatch(fetchPrescriptionSuccess(updatedFileList.map((file) => file.originFileObj)));
//       return updatedFileList;
//     });
//   };

//   useEffect(() => {
//     console.log("Updated fileList:", fileList);
//   }, [fileList]);

//   const uploadButton = (
//     <button style={{ border: 0, background: "none" }} type="button">
//       <UploadOutlined className="text-[24px]" />
//       <div style={{ marginTop: 8 }}>Upload</div>
//     </button>
//   );

//   return (
//     <div className="flex flex-col items-center">
//       <Upload
//         listType="picture-card"
//         fileList={fileList}
//         onPreview={handlePreview}
//         onChange={handleChange}
//         onRemove={handleRemove}
//       >
//         {fileList.length >= 4 ? null : uploadButton}
//       </Upload>
//       {previewImage && (
//         <Image
//           wrapperStyle={{ display: "none" }}
//           key={previewImage}
//           preview={{
//             visible: previewOpen,
//             onVisibleChange: (visible) => setPreviewOpen(visible),
//             afterOpenChange: (visible) => !visible && setPreviewImage(""),
//           }}
//           src={previewImage}
//         />
//       )}
//     </div>
//   );
// }