"use client";
import {ApplePayIcon,CashIcon,LocationIcon,VisaIcon,WalletIcon} from "@/assets/svgs/Icons";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { useTranslations } from "next-intl";
import { SlArrowLeft } from "react-icons/sl";
import Price from "@/components/sharedComponents/product/Price";
import LocalePath from "@/components/UiComponents/LocalePath";
import dynamic from "next/dynamic";
import AppForm from "@/components/UiComponents/forms/AppForm";
import { Form, FormInstance, Radio } from "antd";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { openAddressModal } from "@/store/address";
import AppSkeleton from "@/components/UiComponents/Loader/AppSkeleton";
import { handlePhoneNumberSet } from "@/utils/helpers";
import { useRouter } from "next/navigation";
import SelectAddressesModal from "./SelectAddressesModal";

const LocationText = dynamic(() => import("@/components/sharedComponents/layoutComponents/LocationText"), {
    ssr: false,
    loading: () => <AppSkeleton height="16px" width="200px" className="mt-4" />,
  });

interface Props {
  form: FormInstance;
}

const CheckoutDetails = ({ form }: Props) => {
  const t = useTranslations();
  const location = useSelector((state: RootState) => state.locationConfig);
  const { allCartItems, cartLength } = useSelector((state: RootState) => state.cartConfig);
    const {balance} = useSelector((state:RootState)=>state.ProfileConfig);
  const profile = useSelector((state:RootState)=>state.ProfileConfig);
  const {settings} = useSelector((state:RootState)=>state.generalConfig);
  const dispatch = useDispatch<AppDispatch>();
  const router= useRouter();

  // useEffect(()=>{
  //   if(!cartLength){
  //     router.push("/cart")
  //   }
  // },[cartLength])

  useEffect(() => {
    form.setFieldsValue({location_id:location?.id});
  }, [location]);

  const infoFields = [
    {
      type: "text",
      name: "name",
      label: t("form.name"),
      placeholder: t("form.namePlaceholder"),
      rules: [{ required: true, message: t("validation.nameRequired") }],
      span: 12,
      onchange: (value: string) => form.setFieldsValue({ name: value }),
    },
    {
      type: "phone",
      name: "phone",
      label: t("form.phone"),
      placeholder: t("form.phonePlaceholder"),
      rules: [{ required: true, message: t("validation.phoneRequired") }],
      span: 12,
      inputProps :{
          onChange:(value:any,data:any)=>handlePhoneNumberSet(value,data,form)
      }
    },
    {
      type: "text",
      name: "phone_code",
      itemProps: {
        hidden: true,
      },
    },
    {
      type: "text",
      name: "location_id",
      itemProps: {
        hidden: true,
      },
    },
  ];

  const traderFields = [
    {
      type: "textarea",
      name: "notes",
      label: t("form.notes"),
      placeholder: t("form.notes_placeholder"),
      // rules: [{ required: true, message: t("validation.required") }],
      onchange: (value: string) => form.setFieldsValue({ notes: value }),
    },
  ];

  const handleOpen = () => {
    dispatch(openAddressModal({ step: 0 }));
  };

  return (
    <div className="details_content_wrapper">
      <>
        <h2 className="!mt-0">{t("Text.order")}</h2>
        <div className="bg-white rounded-xl h-fit p-4">
          <h2 className="!m-0">
            {t("Text.orderProducts", { count: cartLength })}
          </h2>
          <div className="h-0.5 bg-greynormal my-4"></div>
          <div className="grid lg:grid-cols-3 gap-4">
            {allCartItems?.map((el: any) => (
              <div className="flex items-center gap-2"  key={`details_card_${el.id}`}>
                <div className="p-4 rounded-xl bg-gray-100 flex justify-center items-center relative">
                  <ImageWithFallback
                    src={el?.product?.main}
                    alt={"ele?.product"}
                    width={200}
                    height={200}
                    className="size-[80px] object-contain"
                  />
                  <p className="size-6 text-xs flex-center-content font-semibold rounded-full absolute top-1.5 start-0.5 bg-white ">
                    x{el?.quantity}
                  </p>
                </div>
                <div className="flex flex-col gap-3">
                  <p className=" text-gray-300">
                    {el?.product?.vendor?.company_name}
                  </p>
                  <LocalePath
                    href={`/products/${el?.product?.slug}`}
                    className="text-sm leading-4 font-semibold"
                  >
                    {el?.product?.name}
                  </LocalePath>
                  <Price product={el?.product} isSmall />
                </div>
              </div>
            ))}
          </div>
        </div>
      </>

      {/* Address */}
      <>
        <h2>{t("Text.shippingLocation")}</h2>
        <div className="app-card-wrapper">
          <h2 className="!m-0">{t("LABELS.address")}</h2>
          <div className="h-0.5 bg-greynormal my-4"></div>
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-4">
              <LocationIcon className="size-6" />
              <div className="flex flex-col items-start ">
                {t("Text.deliver_to")}
                <LocationText
                  withLink={false}
                  className="2xl:w-[300px] w-[160px] font-bold mt-2.5  line-clamp-1 "
                />
              </div>
            </div>
            <button
              type="button"
              onClick={handleOpen}
              className=" flex gap-2 items-center font-semibold text-base leading-none whitespace-nowrap text-primary"
            >
              {t("buttons.change")}
              <SlArrowLeft />
            </button>
          </div>
        </div>
      </>

      {/* Personal Info */}
      <>
        <h2>{t("Text.personalInfo")}</h2>
        <AppForm
          form={form}
          initialValues={{
            name:profile.full_name,
            phone_code:profile.phone_code,
            phone:profile.phone,
            location_id:location?.id
          }}
          fields={infoFields}
          formClass="app-card-wrapper !p-5"
          withOutBtn
        />
      </>

      {/* Notes for Vendor */}
      {/* <AuthWrapper allowedRoles={["vendor"]}> */}
        <h2>{t("Text.your_notes")}</h2>
        <div className="app-card-wrapper">
          <AppForm
            form={form}
            fields={traderFields}
            formClass="bg-white p-5 rounded-2xl !mt-0"
            withOutBtn
          />
        </div>
      {/* </AuthWrapper> */}

      {/* Payment Method */}
      <AppForm form={form} withOutBtn >
        <Form.Item name="payment_method" rules={[{ required: true, message: t("validation.required") }]}>
          <h2>{t("Text.paymentMethod")}</h2>
          <Radio.Group name="payment_method" className="checkout-payments-btn !grid !grid-cols-2 app-card-wrapper !p-5" onChange={(e)=>form.setFieldValue("payment_method",e.target.value)}>
            {settings?.card === "1" && (
              <Radio value="card">
                <VisaIcon />
              </Radio>
            )}
            <Radio value="apple_pay">
              <ApplePayIcon />
            </Radio>
            {settings?.cash === "1" && (
              <Radio value="cash">
                  <div className="flex items-center gap-2">
                    <CashIcon />
                    <span className="text-gray-700">{t("Text.cash")}</span>
                  </div>
              </Radio>
            )}
            {settings?.wallet === "1" && (
              <Radio value="wallet" disabled={balance == "0"} >
                <div className="flex items-center gap-2 ">
                  <WalletIcon
                    size={20}
                    className="text-gray-600 group-hover:text-blue-500"
                  />
                  <span className="text-gray-700">{t("status.wallet")}</span>
                  <span className="text-secondrytext bg-greynormal font-semibold text-xs rounded-full p-1.5">{balance} {t("Text.IQ")}</span>
                </div>
              </Radio>
            )}
          </Radio.Group>
        </Form.Item>
      </AppForm>
      <SelectAddressesModal />
    </div>
  );
};

export default CheckoutDetails;