"use client";
import styles from "@/styles/Component/YourVehicleData/YourVehicleData.module.scss";
import { formatDate } from "@/utils/helpers";
import { Image } from "react-bootstrap";

const Preview = {
  true: (
    <i>
      <Image src="../assets/closeIcon.png" alt="Logo" />
    </i>
  ),
  false: (
    <i>
      <Image src="../assets/checkIcon.png" alt="Logo" />
    </i>
  )
};

const ExclamationPreview = {
  true: (
    <i>
      <Image style={{ width: "26px" }} src="../assets/icon03.png" alt="Logo" />
    </i>
  ),
  false: (
    <i>
      <Image src="../assets/checkIcon.png" alt="Logo" />
    </i>
  )
};

function YourVehicleData({ vehicleData }) {
  return (
    <>
      <div className="cardBlock" id="scrap-destruction-section">
        <div className={styles.YourVehicleDataBlock}>
          <h4 className="text-center font-weight-800 title-color text-uppercase">
            YOUR VEHICLE DATA
          </h4>
          <div className={styles.YourVehicleDataList}>
            <ul className="d-flex flex-wrap">
              <li>
                <div className={`
                  ${styles.YourVehicleDataCard}
                  cardBlockSmall
                  d-flex
                  align-items-center
                  justify-content-between
                  ${vehicleData.scrapped == true ? "redBorder" : "greenBorder"}
                `}
                >
                  <span>Scrapped</span>
                  {Preview[vehicleData.scrapped]}
                </div>
              </li>
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between  ${vehicleData.exported == true ? "redBorder" : "greenBorder"} `}
                >
                  <span>Exported</span>
                  {Preview[vehicleData.exported]}
                </div>
              </li>
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between   ${vehicleData.imported == true ? "redBorder" : "greenBorder"} `}
                >
                  <span>Imported</span>

                  {Preview[vehicleData.imported]}
                </div>
              </li>
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between ${vehicleData.plateChange == true ? "orangeBorder" : "greenBorder"}`}
                >
                  <span>Plate Change</span>
                  {ExclamationPreview[vehicleData.plateChange]}
                </div>
              </li>

              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between   ${vehicleData.colourChange == true ? "redBorder" : "greenBorder"} `}
                >
                  <span>Colour Change</span>
                  {Preview[vehicleData.colourChange]}
                </div>
              </li>
              
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between   ${vehicleData.mileage == true ? "redBorder" : "greenBorder"}`}
                >
                  <span>Mileage</span>
                  {vehicleData.mileage == null
                    ? (<span  className={`${styles.blankValue}`} >***</span>)
                    : Preview[vehicleData.mileage]}

                </div>
              </li>
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between   ${vehicleData.taxi == true ? "redBorder" : "greenBorder"}`}
                >
                  <span>Taxi</span>
                   {vehicleData.taxi == null
                    ? (<span  className={`${styles.blankValue}`} >***</span>)
                    : Preview[vehicleData.taxi]}
                </div>
              </li>

              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between  ${vehicleData.recall == "yes" ? "redBorder" : "greenBorder"}  `}
                >
                  <span>Recall</span>
                  
                  {vehicleData.recall == null
                    ? (<span  className={`${styles.blankValue}`} >***</span>)
                    : vehicleData.recall == "yes"
                      ? Preview["true"]
                      : Preview["false"]}
                      
                </div>
              </li>

              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall  d-flex align-items-center justify-content-between   ${
                    vehicleData.totalKeepers &&
                    vehicleData?.keeperChanged?.length
                      ? vehicleData.totalKeepers &&
                        vehicleData.keeperChanged.length <= 3
                        ? "greenBorder"
                        : vehicleData.totalKeepers &&
                            vehicleData.keeperChanged.length <= 6
                          ? "orangeBorder"
                          : "redBorder"
                      : ""
                  }`}
                >
                  <span>Total Keepers</span>
                  {vehicleData.totalKeepers}
                </div>
              </li>
              <li>
                <div
                  className={`${styles.YourVehicleDataCard} cardBlockSmall d-flex align-items-start justify-content-between ${
                    vehicleData.totalKeepers &&
                    vehicleData?.keeperChanged?.length
                      ? vehicleData.totalKeepers &&
                        vehicleData.keeperChanged.length <= 3
                        ? "greenBorder"
                        : vehicleData.totalKeepers &&
                            vehicleData.keeperChanged.length <= 6
                          ? "orangeBorder"
                          : "redBorder"
                      : ""
                  }`}
                >
                  <span>Keepers</span>
                  <ul>
                    {Array.isArray(vehicleData?.keeperChanged)
                      ? vehicleData.keeperChanged.map((item, index: number) => (
                          <li key={index}>{formatDate(item.date)}</li>
                        ))
                      : null}
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
}

export default YourVehicleData;