"use client";

import CardCart from "@comp/Cards/CardCart/page";
import AppContext from "@ctx/AppContext";
import Image from "next/image";
import Link from "next/link";
import Chapar from "plugins/Chapar";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useState } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";
import { toast } from "react-toastify";
import logo from "@img/logo.png";

const BottomSheetSeeOrder = ({ id }) => {
  const CTX = useContext(AppContext);

  const [bag, setBag] = useState([]);

  const handleOpen = async (e) => {
    if (e.type == "OPEN") {
      try {
        const data = await Chapar.get(
          `${process.env.NEXT_PUBLIC_API_URL}/order/${id}`,
          {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          }
        );
        setBag(data);
      } catch ({ error, status }) {
        toast.error(`${error?.response?.data?.message}`, {
          position: "bottom-right",
          closeOnClick: true,
        });
      }
    }
  };

  return (
    <BottomSheet
      onSpringStart={(e) => handleOpen(e)}
      open={CTX.state.bottomSheetSeeOrderOpen}
      onDismiss={() => CTX.setBottomSheetSeeOrderOpen(false)}
      className={"z-50 relative"}
    >
      {/* {bag && bag.length > 0 && ( */}
      <div className="h-[900px]">
        {bag.orderProducts?.map((e) => (
          <div className="p-3 text-center">
            <p className="pb-3 mb-0 text-sm rtl">
              <PersianNumber
                number={bag.orderProducts?.length}
                style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
              />
              محصول موجود در سبد
            </p>

            {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
            <div>
              {bag.orderProducts.map((e, index) => (
                <div className="group border-t-[1px] border-gray-100  w-full hover:bg-white z-40 tr03 flex rtl pt-2">
                  <Link href={`/products/${e.id}/${e.persianName}`}>
                    <div className=" h-fit">
                      {!!e.mainImage ? (
                        <Image
                          src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e?.mainImage}`}
                          width={100}
                          height={100}
                          className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
                          alt={`${e.productName} - ${e.productName}`}
                        />
                      ) : (
                        <div className="xs:!w-[85px] lg:!w-[85px] ">
                          <Image
                            src={logo}
                            className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
                            alt="وسمه"
                          />
                        </div>
                      )}
                    </div>
                  </Link>
                  <div className="w-full p-3 text-right">
                    <Link href={`/products/${e.id}/${e.productName}`}>
                      <p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px]  max-h-[50px] tr03   ">
                        {e?.productName}
                      </p>
                    </Link>

                    <div className="flex w-full rounded-full  ltr">
                      <div className="mt-3">
                        <p className="mb-0 text-sm rtl">
                          <PersianNumber
                            number={e?.count}
                            style={"text-sm ml-1"}
                          />
                          عدد
                        </p>
                      </div>
                      <div className="w-full text-right rounded-full">
                        {e?.hasDiscount ? (
                          <div className="relative flex justify-end">
                            <p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
                              <del>
                                <PersianNumber
                                  number={(
                                    data?.productFee / 10
                                  ).toLocaleString()}
                                  style={"text-[13px]"}
                                />
                              </del>
                            </p>
                            <div className="flex rtl mt-[8px]">
                              {" "}
                              <p className="mb-0 font-bold">
                                <PersianNumber
                                  number={(
                                    e?.productFeeWithDiscount / 10
                                  ).toLocaleString()}
                                />
                              </p>
                              <small className="mr-1 mt-[3px]">تومان</small>
                            </div>
                          </div>
                        ) : (
                          <div className="flex rtl mt-[3px]">
                            {" "}
                            <p className="mb-0 text-lg font-bold">
                              <PersianNumber
                                number={(e?.productFee / 10).toLocaleString()}
                              />
                            </p>
                            <small className="mr-1 mt-[6px]">تومان</small>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      {/* )} */}
    </BottomSheet>
  );
};

export default BottomSheetSeeOrder;