/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import * as yup from "yup";
import { useFormik } from "formik";

import RoundedInput from "@/components/elements/RoundedInput";
import React, { useEffect, useState } from "react";
import useAxios from "@/hooks/useAxios";
import RoundedButton from "@/components/elements/RoundedButton";
import { useRouter } from "next/navigation";

// Validation schema using Yup
const schema = yup.object().shape({
  offerPrice: yup.string().required(" وارد کردن مبلغ پیشنهادی الزامی است"),
  projectTime: yup.string().required(" وارد کردن زمان پیشنهادی الزامی است"),
});

function ProjectRequestForm({ projectId }: { projectId: string }) {
  const router = useRouter();
  const { request } = useAxios();
  const [usertype, setUsertype] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setUsertype(localStorage.getItem("usertype"));
    }
  }, []);
  const formik = useFormik({
    initialValues: {
      offerPrice: "",
      projectTime: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      try {
        await request("POST", "/projects/request", {
          project_id: projectId,
          request_time: values.projectTime,
          offer_price: values.offerPrice,
        });
        router.push("/settings/workroom");
      } catch (err: any) {
        console.log("Unhandled error:", err?.message);
      }
    },
  });

  return (
    <form
      onSubmit={formik.handleSubmit}
      className="w-full max-w-sm flex flex-col items-center mx-auto my-5"
    >
      {usertype == "user" ? (
        <>
          <RoundedInput
            type="number"
            name="projectTime"
            placeholder="زمان پیشنهادی"
            className={`mt-4 ${
              formik.touched.projectTime && formik.errors.projectTime
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.projectTime}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
          {formik.touched.projectTime && formik.errors.projectTime && (
            <small className="text-red-500 mt-1 block">
              {formik.errors.projectTime}
            </small>
          )}
          <RoundedInput
            type="number"
            name="offerPrice"
            placeholder="مبلغ پیشنهادی به تومان: 20،000،000 "
            className={`mt-4 ${
              formik.touched.offerPrice && formik.errors.offerPrice
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.offerPrice}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
          {formik.touched.offerPrice && formik.errors.offerPrice && (
            <small className="text-red-500 mt-1 block">
              {formik.errors.offerPrice}
            </small>
          )}
          <RoundedButton className="w-40 h-10 mt-4" type="submit">
            ارسال
          </RoundedButton>
        </>
      ) : (
        ""
      )}
    </form>
  );
}

export default ProjectRequestForm;
