"use client";
import styles from "@/styles/Component/MotMileageSummary/MotMileageSummary.module.scss";
import { Col, Image, Row } from "react-bootstrap";

function SummaryItem({
  label,
  value,
  icon
}: {
  label: string;
  value: string | number;
  icon?: string; // Icon file name (without extension) in /assets folder. For example, "checkIcon1.png"
}) {
  return (
    <div
      className={`${styles.MotMileageSummaryBlock} cardBlockSmall d-flex align-items-center justify-content-between`}
    >
      <span
        className={`${styles.MotMileageSummaryLft} d-flex align-items-center`}
      >
        {icon && (
          <i>
            <Image src={`../assets/${icon}`} alt="icon" />
          </i>
        )}
        {label}
      </span>
      <span className={styles.MotMileageSummaryNum}>{value}</span>
    </div>
  );
}

function MotMileageSummary({ motMileageSummary }) {
  console.log("motMileageSummary", motMileageSummary);

  const getMileageStatus = () => {
    const mileage = motMileageSummary.avgMileagePerYear;
    if (mileage < 6000) {
      return { value: "Below Average", icon: "checkIcon1.png" };
    } else if (mileage >= 6000 && mileage <= 8000) {
      return { value: "Average", icon: "icon03.png" };
    } else {
      return { value: "Above Average", icon: "closeIcon1.png" };
    }
  };

  return (
    <>
      <div className="cardBlock">
        <div className={styles.MotMileageSummaryBlock}>
          <h4 className="text-center font-weight-800 title-color">
            Mot & Mileage Summary
          </h4>
          <Row>
            <Col md={6}>
              <SummaryItem
                label="Total Test"
                value={motMileageSummary.totalTests}
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Pass Rate"
                value={`${motMileageSummary.passRatePercentage}% hi`} 
                icon={motMileageSummary.passRatePercentage >= 80 ? "checkIcon1.png" : (motMileageSummary.passRatePercentage >= 70 && motMileageSummary.passRatePercentage < 80 ? "icon03.png" : "closeIcon1.png")}
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Test Passed"
                value={motMileageSummary.totalPassed}
                icon="checkIcon1.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Pass Rate With Advisory"
                value={`${motMileageSummary.passRateWithAdvisory}%`}
                icon="icon03.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Passed With Advisory"
                value={motMileageSummary.passedWithAdvisory}
                icon="icon03.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Pass Rate Without Advisory"
                value={`${motMileageSummary.passRateWithoutAdvisory}%`}
                icon="checkIcon1.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Total Items Advised"
                value={motMileageSummary.totalItemsAdvised}
                icon="icon03.png"
              />
            </Col>
            <Col md={6}>
              {motMileageSummary.mileageIssue ? (
                <SummaryItem
                  label="Mileage Issues"
                  value={motMileageSummary.mileageIssue ? "Yes" : "No"}
                  icon="closeIcon1.png"
                />
              ) : (
                <SummaryItem
                  label="Mileage Issues"
                  value={motMileageSummary.mileageIssue ? "Yes" : "No"}
                  icon="checkIcon1.png"
                />
              )}
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Advisory Average/Per MOT"
                value={motMileageSummary.advisoryAverage}
                icon="icon03.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Last MOT Mileage"
                value={`${motMileageSummary.lastMileage} ${motMileageSummary.lastMileageUnit}`}
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Test Failed"
                value={motMileageSummary.totalFailed}
                icon="closeIcon1.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Est Current Mileage"
                value={`${motMileageSummary.currentMileage} ${motMileageSummary.lastMileageUnit}`}
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Total Items Failed"
                value={motMileageSummary.totalItemsFailed}
                icon="closeIcon1.png"
              />
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Average Mileage"
                value={`${motMileageSummary.avgMileagePerYear} Miles/Year`}
              />
            </Col>
            <Col md={6}>
              {motMileageSummary.taxi ? (
                <SummaryItem
                  label="Taxi/Rent a Car Use"
                  value={"Might be"}
                  icon="closeIcon1.png"
                />
              ) : (
                <SummaryItem
                  label="Taxi/Rent a Car Use"
                  value={"Might not"}
                  icon="checkIcon1.png"
                />
              )}
            </Col>
            <Col md={6}>
              <SummaryItem
                label="Mileage Status"
                value={getMileageStatus().value}
                icon={getMileageStatus().icon}
              />
            </Col>
            {/* <Col md={6}>
              {motMileageSummary.recall == "yes" ? (
                <SummaryItem
                  label="Recall"
                  value={motMileageSummary.recall == "yes" ? "Yes" : "No"}
                  icon="closeIcon1.png"
                />
              ) : (
                <SummaryItem
                  label="Recall"
                  value={motMileageSummary.recall == "yes" ? "Yes" : "No"}
                  icon="checkIcon1.png"
                />
              )}
            </Col> */}
          </Row>
        </div>
      </div>
    </>
  );
}

export default MotMileageSummary;