import AppForm, { FieldProp } from '@/components/UiComponents/forms/AppForm';
import AppModal from '@/components/UiComponents/Modal/AppModal';
import { closeRateModal } 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 { useTranslations } from 'next-intl';
import toast from 'react-hot-toast';
import axiosInstance from '@/services/axiosClient';
import { showDynamicSwal } from '@/utils/helpers';
import Success from "@/assets/images/success2.gif";
import { useRouter } from 'next/navigation';

const RateOrder = () => {
  const {openRateModal,isTrader,selectedItem} = useSelector((state:RootState)=>state.OrderConfig);
  const dispatch = useDispatch<AppDispatch>();
  const [loading,setLoading]=useState(false);
  const [form] = Form.useForm();
  const t = useTranslations();
  const router = useRouter();
  const fields: FieldProp[] = [
      {
        type: "rate",
        name: "rating",
        rules: [{ required: true, message: t("validation.rateRequired") }],
        itemProps: {
          className: "flex justify-center items-center",
          // dir: "ltr"
        },
        inputProps: {
          defaultValue: 1,
          // allowHalf: true,
          allowClear: true,
          starSize: 40,
        },
      },
      {
        type: "text",
        name: "address",
        label: t("form.reviewTitle"),
        placeholder: t("form.reviewTitlePlaceholder"),
        rules: [{ required: true, message: t("validation.reviewTitleRequired") }],
      },
      {
        type: "textarea",
        name: "review",
        label: t("form.comment"),
        placeholder: t("form.commentPlaceholder"),
        rules: [{ required: true, message: t("validation.commentRequired") }],
      },
  ];

  const handleRateItem = async (values:any)=>{
    try{
      setLoading(true);
      values = {
        ...values,
        uuid:selectedItem?.order_id,
        rateable_type:isTrader ? "trader": "product",
        rateable_id:isTrader ? selectedItem?.id : selectedItem?.product_id
      }
      const {data} = await axiosInstance.post("/rates",values)
      if(data){
        dispatch(closeRateModal())
        router.refresh()
        await showDynamicSwal({
                  title: t("Messages.thanks_rate"),
                  imageUrl: `${Success.src}`,
                  text: "",
                  showCancelButton: false,
                  showConfirmButton: false,
                  timer: 1500,
                  customClass: {
                    title: "swal-title",
                    text: "hidden",
                  },
              });
      }
    }catch(error:any){
      dispatch(closeRateModal())
      toast.error(error?.response?.data?.message);
    }finally{
      setLoading(false)
    }
  }

  return (
        <AppModal
          footer={false} 
          centered 
          isModalVisible={openRateModal}
          onCancel={()=>dispatch(closeRateModal())}
        >
          <h3 className='text-2xl mt-8  text-center font-bold mb-4'>{t(isTrader ? "Text.PROVIDER_RATE":"Text.PRODUCT_RATE")}</h3>
          <AppForm
              fields={fields}
              onFinish={handleRateItem}
              loader={false}
              form={form}
              btnClass='full-modal-btn'
              fromBtn='buttons.confirm'
          />
        </AppModal>
  )
}

export default RateOrder