import AppForm, { FieldProp } from "@/components/UiComponents/forms/AppForm";
import AppModal from "@/components/UiComponents/Modal/AppModal";
import { closeRecoveryModal } from "@/store/order";
import { AppDispatch, RootState } from "@/store/store";
import { useDispatch, useSelector } from "react-redux";
import { Form } from "antd";
import React, { useState } from "react";
import { IoMdInformationCircleOutline } from "react-icons/io";
import useWindowWidth from "@/utils/hooks/useWindowWidth";
import { useTranslations } from "next-intl";
import axiosInstance from "@/services/axiosClient";
import { showDynamicSwal } from "@/utils/helpers";
import Success from "@/assets/images/success2.gif";
import toast from "react-hot-toast";
import { useRouter } from "next/navigation";

const RecoveryModal = () => {
  const { openRecoveryModal,selectedItem } = useSelector((state: RootState) => state.OrderConfig );
  const dispatch = useDispatch<AppDispatch>();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const windowWidth = useWindowWidth();
  const t = useTranslations();
  const router = useRouter();
  
  const fields: FieldProp[] = [
    {
      type: "radio",
      name: "rate",
      label: t("form.satisfaction"),
      rules: [
        { required: true, message: t("validation.satisfactionRequired") },
      ],
      options: [
        { value: "1", label: t("form.satisfactionOptions.notSatisfied") },
        { value: "2", label: t("form.satisfactionOptions.satisfied") },
        { value: "3", label: t("form.satisfactionOptions.verySatisfied") },
      ],
    },
    {
      type: "textarea",
      name: "reason",
      label: t("form.returnReason"),
      placeholder: t("form.returnReasonPlaceholder"),
      rules: [
        { required: true, message: t("validation.returnReasonRequired") },
      ],
    },
    {
      type: "mediaUploader",
      label: t("form.uploadImage"),
      uploadText: t("form.uploadImage"),
      name: "return_order_items",
      rules: [{ required: true, message: t("validation.imgRequired") }],
      inputProps:{
        model:"return_order_items",
        initialFileList: []
      },
      maxCount: 1,
    }
  ];

  const handleSubmit = async (values: any) => {
    values = {
      ...values,
      uuid:selectedItem?.uuid,
      image:{
        media:values?.return_order_items
      },
    }
    try {
      setLoading(true);
      const { data } = await axiosInstance.post("/orders/return", values);
      if (data) {
        dispatch(closeRecoveryModal());
        router.refresh()
        await showDynamicSwal({
          title: t("Messages.return_succes"),
          imageUrl: `${Success.src}`,
          text: "",
          showCancelButton: false,
          showConfirmButton: false,
          timer: 1500,
          customClass: {
            title: "swal-title",
            text: "hidden",
          },
        });
      }
    } catch (error: any) {
      toast.error(error?.response?.data?.message);
    } finally {
      setLoading(false);
    }
    // dispatch(closeRecoveryModal());
    // handle submit logic here
  };

  return (
    <AppModal
      footer={false}
      centered
      isModalVisible={openRecoveryModal}
      onCancel={() => dispatch(closeRecoveryModal())}
      width={windowWidth >= 1024 ? 553 : undefined}
    >
      <h3 className="text-2xl mt-8  text-center font-bold mb-4">
        {t("orders.return_product")}
      </h3>
      <p className="bg-greynormal px-4 py-3 rounded-xl  text-xs flex items-center gap-1.5">
        <IoMdInformationCircleOutline className="text-xl" />
        {t("orders.return_prod_desc")}
      </p>
      <AppForm
        fields={fields}
        onFinish={handleSubmit}
        loader={loading}
        form={form}
        btnClass="full-modal-btn"
        fromBtn="buttons.confirm"
      />
    </AppModal>
  );
};

export default RecoveryModal;