"use client";
import { Col, Container, Image, Row } from "react-bootstrap";
import styles from "@/styles/Component/HalfValuation/HalfValuation.module.scss";
import { FormikProvider, useFormik, Form as FormikForm } from "formik";
import {
  CxTextArea,
  CxTextInput
} from "@/components/default/Field/CxTextInput";

import { useApp } from "@/components/App";

interface ValuationDetail {
  vrm: string;
  name: string;
  email: string;
  mobile: string;
  post_code: string;
  city: string;
  additional_information: string;
}

function HalfValuationCardDetails() {
  const { state } = useApp();
  const valuationDetail = state?.valuationDetail as ValuationDetail;

  const onSubmit = async () => {};

  const formik = useFormik({
    initialValues: {
      vrm: valuationDetail?.vrm,
      name: valuationDetail?.name,
      email: valuationDetail?.email,
      mobile: valuationDetail?.mobile,
      post_code: valuationDetail?.post_code,
      city: valuationDetail?.city,
      additional_information: valuationDetail?.additional_information
    },
    onSubmit: onSubmit
  });

  const { handleSubmit } = formik;
  return (
    <>
      <div className={styles.HalfValuationBlock}>
        <Container className="bigContainer">
          <div className="vehiclechangescardBlock">
            <div
              className={`${styles.CarBrandsCard} d-md-flex align-items-center justify-content-between`}
            >
              <div className={`${styles.ManuallyHd} d-flex align-items-center`}>
                <i>
                  <Image src="/assets/mazda.png" alt="mazda" />
                </i>
                <h3>
                  2025 Mazdas - <span>3 venture edtion</span>
                </h3>
              </div>

              <span className={styles.ManuallyBtn}>
                Not your car? <small>enter car details manually</small>
              </span>
            </div>
            <div className={styles.HalfValuationForm}>
              <h4>For Free Valuation please fill the form below</h4>
              <FormikProvider value={formik}>
                <FormikForm onSubmit={handleSubmit}>
                  <Row>
                    <Col md={6}>
                      <CxTextInput
                        name="name"
                        label="Your Name Please"
                        placeholder="Full Name"
                        isDisabled={true}
                        maxLength={20}
                      />
                    </Col>
                    <Col md={6}>
                      <CxTextInput
                        name="email"
                        label="Email Address"
                        placeholder="We will send valuation email"
                        isDisabled={true}
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="mobile"
                        label="Mobile Number"
                        placeholder="Carefully enter please"
                        isDisabled={true}
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="post_code"
                        label="Enter Your post code"
                        placeholder="Carefully enter your full post code"
                        isDisabled={true}
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="city"
                        label="City"
                        placeholder="Very Important"
                        isDisabled={true}
                      />
                    </Col>
                    <Col md={12}>
                      {/* <CxTextInput
                        name="additional_information"
                        label="Mechanical or Electrical Issue?"
                        placeholder="Additional information / comments"
                        isDisabled={true}
                      /> */}
                      <CxTextArea
                        name="additional_information"
                        label="Mechanical,  electrical or body work issue?"
                        required={true}
                        placeholder="Message to the buyer / Additional information"
                        maxLength={300}
                      />
                    </Col>
                  </Row>
                </FormikForm>
              </FormikProvider>
            </div>

            <div className="CarImgCard">
              <Image src="/assets/carImg.png" alt="carImg" />
            </div>
            <div className="CarImgCardOne">
              <Image src="/assets/carImg1.png" alt="carImg" />
            </div>
          </div>
        </Container>
      </div>
    </>
  );
}

export default HalfValuationCardDetails;