"use client";
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useEffect, useState } from "react";
import AppContext from "@ctx/AppContext";
import ap from "@img/ap.png";
import zarin from "@img/zarin.png";
import Image from "next/image";
import { useRouter } from "next/navigation";
import Chapar from "plugins/Chapar";
import BottomSheetDiscount from "plugins/bottomSheet/BottomSheetDiscount";
import { toast } from "react-toastify";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";

const CheckoutData = () => {
  const CTX = useContext(AppContext);
  const [shippingData, setShippingData] = useState([]);
  const [shippingId, setShippingID] = useState(null);
  const [addressData, setAddressData] = useState([]);
  const [addressId, setAddressId] = useState(null);
  const [permissionGoPay, setPermissionGoPay] = useState(false);

  const router = useRouter();
  const checkOutData = CTX.state.checkOutData;

  const body = {
    addressId: addressData[addressId]?.id,

    orderId: checkOutData?.id,
    shippingId: shippingData[shippingId]?.id,
  };

  const GetShippingData = async () => {
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/warehouse/shipping?page=0`
      );

      setShippingData(data);
    } catch ({ error, status }) {
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  const handleShippingID = async (index) => {
    if (addressId !== null) {
      setShippingID(index);
      try {
        const data = await Chapar.post(
          `${process.env.NEXT_PUBLIC_API_URL}/order/bag/shipping/${checkOutData?.id}`,
          JSON.stringify({
            addressId: addressData[addressId]?.id,

            orderId: checkOutData?.id,
            shippingId: shippingData[index]?.id,
          }),
          {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          }
        );
        CTX.setCheckOutData(data);
        setPermissionGoPay(true);
      } catch ({ error, status }) {
        toast.error(`${error?.response?.data?.message}`, {
          position: "bottom-right",
          closeOnClick: true,
        });
      }
    } else {
      toast.error(`ابتدا آدرس را انتحاب کنید`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  const handleGoPayment = async () => {
    const token = localStorage.getItem("token").slice(7);

    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/order/bag/payment/${checkOutData?.id}?paymentMethod=1&access_token=${token}`

        // {
        //   headers: {
        //     Authorization: token,
        //   },
        // }
      );

      router.push(data?.paymentUrl);
    } catch ({ error, status }) {
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  useEffect(() => {
    if (shippingData.length <= 0) {
      GetShippingData();
    }

    CTX.fetchAddressUser();
  }, [checkOutData]);

  useEffect(() => {
    setAddressData(CTX.state.addressData);
  }, [CTX.state.addressData]);

  useEffect(() => {
    if (CTX.state.checkOutData.length <= 0) {
      router.push("/cart");
    }

    setPermissionGoPay(false);
  }, []);

  return (
    <>
      <div className=" pb-20">
        <NavbarTransparent theme={1} />

        <div className="xs:w-full lg:w-4/12 mx-auto">
          <div className="text-right flex rtl justify-between bg-primary-600 rounded-2xl m-3 px-4 ">
            <p className="mb-0 text-sm font-semibold py-4 text-white">
              آدرس ها
            </p>
          </div>

          {addressData?.length > 0 ? (
            <>
              {addressData.map((e, index) => (
                <div
                  onClick={() => setAddressId(index)}
                  className={`flex rtl justify-between cursor-pointer mx-2 relative ${
                    addressId == index
                      ? "border-2 !border-green-600 rounded-lg bg-green-50"
                      : ""
                  }`}
                >
                  <div className="flex rtl px-3 py-4 w-11/12" key={index}>
                    <div>
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 188 264"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        className="opacity-70 mx-auto "
                      >
                        <path
                          d="M94 10.125C47.418 10.125 9.625 46.0957 9.625 90.3984C9.625 141.375 65.875 222.158 86.5293 250.061C87.3866 251.238 88.5103 252.197 89.8087 252.858C91.107 253.518 92.5432 253.863 94 253.863C95.4568 253.863 96.893 253.518 98.1913 252.858C99.4897 252.197 100.613 251.238 101.471 250.061C122.125 222.17 178.375 141.416 178.375 90.3984C178.375 46.0957 140.582 10.125 94 10.125Z"
                          stroke="black"
                          stroke-width="18.75"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M94 122.625C109.533 122.625 122.125 110.033 122.125 94.5C122.125 78.967 109.533 66.375 94 66.375C78.467 66.375 65.875 78.967 65.875 94.5C65.875 110.033 78.467 122.625 94 122.625Z"
                          stroke="black"
                          stroke-opacity="0.37"
                          stroke-width="18.75"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </div>
                    <div className="mx-2">
                      <p className="mb-0 text-[12px] text-gray-500">
                        {" "}
                        {e.address}{" "}
                      </p>
                    </div>
                  </div>

                  <div
                    className={`w-5 h-5 rounded-full  mt-4 mx-3 border-2 relative   ${
                      addressId == index
                        ? "border-green-400 bg-green-200"
                        : "bg-gray-100 border-gray-200 "
                    }`}
                  ></div>
                </div>
              ))}
            </>
          ) : (
            <div className=" p-5  rounded-lg">
              <div className="flex justify-center py-5">
                <div
                  className="bg-white shadow   w-fit rounded-full text-sm   p-4"
                  onClick={() => CTX.setBottomSheetAddressOpen(true)}
                >
                  افزودن آدرس +{" "}
                </div>
              </div>
            </div>
          )}

          <div className="text-right flex rtl justify-between bg-primary-600 rounded-2xl m-3 px-4 ">
            <p className="mb-0 text-sm font-semibold py-4 text-white">
              زمان و نحوه ارسال
            </p>
          </div>

          <div>
            {shippingData?.map((e, index) => (
              <div
                onClick={() => handleShippingID(index)}
                className={`flex rtl justify-between cursor-pointer mx-2 ${
                  shippingId == index
                    ? "border-2 !border-green-600 rounded-lg bg-green-50"
                    : ""
                }`}
              >
                <div className="flex rtl px-3 py-4" key={index}>
                  <div>
                    <svg
                      width="25"
                      height="25"
                      viewBox="0 0 234 244"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto opacity-70 mt-2"
                    >
                      <path
                        d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
                        fill="black"
                      />
                      <path
                        d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
                        stroke="black"
                        stroke-opacity="0.44"
                        stroke-width="18.75"
                        stroke-linecap="round"
                      />
                    </svg>
                  </div>
                  <div className="mx-2">
                    <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                      {e.name}{" "}
                    </h3>
                    <p className="mb-0 text-[12px] text-gray-500">
                      {" "}
                      هزینه ارسال
                      <PersianNumber
                        number={(e.deliveryCost / 10)?.toLocaleString()}
                        style={"text-gray-600  mx-1"}
                      />
                      هزار تومان
                    </p>
                  </div>
                </div>

                <div
                  className={`w-5 h-5 rounded-full  mt-6 mx-3 border-2  ${
                    shippingId == index
                      ? "border-green-400 bg-green-200"
                      : "bg-gray-100 border-gray-200 "
                  }`}
                ></div>
              </div>
            ))}
          </div>

          <div className="text-right flex rtl justify-between bg-primary-600 rounded-2xl m-3 px-4 ">
            <p className="mb-0 text-sm font-semibold py-4 text-white">
              روش پرداخت
            </p>
          </div>

          <div>
            <div
              className={`flex rtl px-2 py-2 mx-2  border-2 border-transparent mt-5 ${
                true ? "border-2 !border-green-600 rounded-lg bg-green-50" : ""
              }`}
            >
              <div>
                <Image src={zarin} className="w-[50px]" alt="زرین پال" />
              </div>
              <div className="mx-2">
                <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                  پرداخت آنلاین
                </h3>
                <p className="mb-0 text-[12px] text-gray-500">زرین پال</p>
              </div>
            </div>

            <div className="flex rtl px-2 py-1 mx-2 mt-5 opacity-40">
              <div>
                <Image src={ap} className="w-[45px]" alt="آپ" />
              </div>
              <div className="mx-2">
                <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                  پرداخت آنلاین (به زودی)
                </h3>
                <p className="mb-0 text-[12px] text-gray-500">آسان پرداخت</p>
              </div>
            </div>

            <div
              className={`flex justify-between rtl px-3 mt-5 ${
                checkOutData?.discountCode != "" ? "" : ""
              }`}
              onClick={() => {
                if (checkOutData?.discountCode == "") {
                  CTX.setBottomSheetDiscountOpen(true);
                }
              }}
            >
              <div className="flex">
                <div>
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 244 194"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="opacity-70 mt-2"
                  >
                    <path
                      d="M122 93.875V100.125M122 47V53.25M122 140.75V147M209.5 184.5C216.13 184.5 222.489 181.866 227.178 177.178C231.866 172.489 234.5 166.13 234.5 159.5V122C227.87 122 221.511 119.366 216.822 114.678C212.134 109.989 209.5 103.63 209.5 97C209.5 90.3696 212.134 84.0107 216.822 79.3223C221.511 74.6339 227.87 72 234.5 72V34.5C234.5 27.8696 231.866 21.5107 227.178 16.8223C222.489 12.1339 216.13 9.5 209.5 9.5H34.5C27.8696 9.5 21.5107 12.1339 16.8223 16.8223C12.1339 21.5107 9.5 27.8696 9.5 34.5V72C16.1304 72 22.4893 74.6339 27.1777 79.3223C31.8661 84.0107 34.5 90.3696 34.5 97C34.5 103.63 31.8661 109.989 27.1777 114.678C22.4893 119.366 16.1304 122 9.5 122V159.5C9.5 166.13 12.1339 172.489 16.8223 177.178C21.5107 181.866 27.8696 184.5 34.5 184.5H209.5Z"
                      stroke="black"
                      stroke-opacity="0.54"
                      stroke-width="18.75"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
                <div className="mx-2">
                  <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                    افزودن کد تخفیف{" "}
                  </h3>
                  <p className="mb-0 text-[12px] text-gray-500">
                    کد تخفیف خود را وارد کنید
                  </p>
                </div>
              </div>

              {checkOutData?.discountCode == "" ? (
                <div className="pl-3">
                  <span className="text-[30px] opacity-60">+</span>
                </div>
              ) : (
                <div className="text-right flex justify-end  px-2 py-1 mx-2">
                  <p className="text-green-600 mb-0 text-[12px] ">
                    کد تخفیف ثبت شد{" "}
                  </p>
                </div>
              )}
            </div>
          </div>

          <div className=" bg-primary-600 rounded-2xl pb-2 m-2 ">
            <div className="text-right flex rtl justify-between my-3 px-4 ">
              <p className="mb-0 text-sm font-medium py-4 text-white">
                حساب نهایی
              </p>

              {/* <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
                <p className="mb-0 text-[11px] text-white rtl">مشاهده اقلام</p>
              </div> */}
            </div>

            <div>
              <div className="flex justify-between rtl px-4">
                <p className="mb-0 text-[12px] text-gray-200">قیمت </p>

                <div className="flex justify-center">
                  <p className="mb-0 ">
                    <PersianNumber
                      number={(
                        checkOutData?.totalProductsPrice / 10
                      )?.toLocaleString()}
                      style={"!text-[14px] !font-medium text-white"}
                    />
                  </p>
                  <small className="text-gray-200 text-[12px] mt-1 mx-1">
                    {" "}
                    تومان
                  </small>
                </div>
              </div>

              <div className="flex justify-between rtl my-2 px-4">
                <p className="mb-0 text-[12px] text-gray-200">تخفیف محصول</p>

                <div className="flex justify-center">
                  <p className="mb-0 ">
                    <PersianNumber
                      number={(
                        checkOutData?.discountPrice / 10
                      )?.toLocaleString()}
                      style={"!text-[14px] !font-medium text-white"}
                    />
                  </p>
                  <small className="text-gray-200 text-[12px] mt-1 mx-1">
                    {" "}
                    تومان
                  </small>
                </div>
              </div>

              <div className="flex justify-between rtl my-2 px-4">
                <p className="mb-0 text-[12px] text-gray-200">
                  هزینه بسته بندی
                </p>

                <div className="flex justify-center">
                  <p className="mb-0 ">
                    <PersianNumber
                      number={(
                        checkOutData?.packingPrice / 10
                      )?.toLocaleString()}
                      style={"!text-[14px] !font-medium text-white"}
                    />
                  </p>
                  <small className="text-gray-200 text-[12px] mt-1 mx-1">
                    {" "}
                    تومان
                  </small>
                </div>
              </div>

              <div className="flex justify-between rtl my-2 px-4">
                <p className="mb-0 text-[12px] text-gray-200">هزینه ارسال</p>

                <div className="flex justify-center">
                  <p className="mb-0 ">
                    <PersianNumber
                      number={(
                        checkOutData?.deliveryPrice / 10
                      )?.toLocaleString()}
                      style={"!text-[14px] !font-medium text-white"}
                    />
                  </p>
                  <small className="text-gray-200 text-[12px] mt-1 mx-1">
                    {" "}
                    تومان
                  </small>
                </div>
              </div>

              <div className="flex justify-between bg-primary-700 p-3 rtl m-2 rounded-xl">
                <p className="mb-0 text-sm text-gray-200 font-bold">
                  قابل پرداخت
                </p>

                <div className="flex justify-center">
                  <p className="mb-0 ">
                    <PersianNumber
                      number={(checkOutData?.totalPrice / 10)?.toLocaleString()}
                      style={"!text-[14px] !font-medium text-white"}
                    />
                  </p>
                  <small className="text-gray-200 text-[12px] mt-1 mx-1">
                    {" "}
                    تومان
                  </small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <NavBarDownCart
          calculateTotalCost={checkOutData.totalPrice / 10}
          event={() => handleGoPayment()}
          permissionGoPay={permissionGoPay}
        />
      </div>

      <BottomSheetDiscount orderId={checkOutData?.id} />
    </>
  );
};

export default CheckoutData;