"use client";
import { Col, Container, Row } from "react-bootstrap";
import styles from "@/styles/Component/ThankYou/ThankYou.module.scss";
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";

function ThankYou() {
  const {
    state: { SECOND_PAGE_FORMDATA = {} }
  } = useApp();
  const [data, setData] = useState("");
  const { request, loading } = useRequest();
  const getValuation = async () => {
    try {
      const res = await request(
        "VALUATION_DATA",
        SECOND_PAGE_FORMDATA as KEYVALUEPAIR
      );
      // @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 (
    <div className={styles.ThankYouBlock}>
      <Container className="bigContainer">
        <div className="cardBlock">
          <div className={`${styles.ThankYouHeading} text-center`}>
            <h2>Thank You</h2>
            <span>For Using CarBaBa</span>
          </div>

          <div className={styles.ThankYouBlockOuter}>
            <Row>
              <Col md={12}>
                <div
                  className={styles.ThankYouInfoCard}
                  dangerouslySetInnerHTML={{
                    __html: data
                  }}
                />
              </Col>
              <Col md={12}>
                <div className={styles.ThankYouInfoCard}>
                  <h3>Please Arrange Following</h3>
                  <ul className="d-flex flex-wrap">
                    <li>V5 Document (or Logbook)</li>
                    <li>Spare Keys</li>
                    <li>Photo ID (Passport/Driving License)</li>
                    <li>Accessories e.g Wheel nut, Stereo Code etc</li>
                    <li>Vehicle Service History</li>
                    <li>Any other relevant documents</li>
                  </ul>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </Container>
    </div>
  );
}

export default ThankYou;