"use client";
import { useEffect, useMemo, useState } from "react";
import { useRequest } from "@/components/App/request";
import { useApp } from "@/components/App";
import { KEYVALUEPAIR } from "@/types/interfaces";
import { SuspenseLoader } from "@/components/App/Loader";
import ThankYou from "./ThankYou";
import ThankYouWithoutValue from "./ThankYouWithoutValue";
import { useRouter } from "next/navigation";

function Index() {
  const {
    state: { SECOND_PAGE_FORMDATA = {} }, dispatch
  } = useApp();

  const router = useRouter();
  const [data, setData] = useState({
    thank_you_content: "",
    min_value: 0,
    max_value: 0,
    vrm: "",
    mileage: 0,
    model: ""
  });
  const { request, loading } = useRequest();
  const getValuation = async () => {
    try {
      // const res = await request(
      //   "VALUATION_DATA",
      //   SECOND_PAGE_FORMDATA as KEYVALUEPAIR
      // );
      // if(res.data){

      // }
      const res = await request(
        "VALUATION_DATA",
        SECOND_PAGE_FORMDATA as KEYVALUEPAIR
      );

      //  dispatch({
      //   type: "SECOND_PAGE_FORMDATA",
      //   payload: {},
      // });

        dispatch({
          SECOND_PAGE_FORMDATA: {values: {}}
        });

      // @ts-expect-error "Validation"
      setData(res.data);
    } catch (err) {
      console.log(err);
    } finally {
    }
  };
  useEffect(() => {
    if (Object.keys(SECOND_PAGE_FORMDATA).length){ 
      getValuation()
    } else {
      router.push('/')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const isLoading = useMemo(() => loading.VALUATION_DATA_LOADING, [loading]);

  if (isLoading) return <SuspenseLoader />;

  if (!SECOND_PAGE_FORMDATA || Object.keys(SECOND_PAGE_FORMDATA).length === 0) {
    return <div></div>;
  }

  return data?.thank_you_content && data?.max_value && data?.min_value ? (
    <ThankYou data={data} />
  ) : (
    <ThankYouWithoutValue data={data?.thank_you_content ?? data} />
  );
}

export default Index;