"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";

function Index() {
  const {
    state: { SECOND_PAGE_FORMDATA = {} }
  } = useApp();
  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 formData = SECOND_PAGE_FORMDATA as KEYVALUEPAIR;
      
      const res = await request(
        "VALUATION_DATA",
        // SECOND_PAGE_FORMDATA as KEYVALUEPAIR
        {
          id: formData.id,
          vrm: formData.vrm,
        }
      );
      // @ts-expect-error "Validation"
      setData(res.data);
    } catch (err) {
      console.log(err);
    } finally {
    }
  };
  useEffect(() => {
    if (Object.keys(SECOND_PAGE_FORMDATA).length) getValuation();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [SECOND_PAGE_FORMDATA]);

  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;