"use client";
import styles from "@/styles/Component/EmissionsGraph/EmissionsGraph.module.scss";
import { Image } from "react-bootstrap";
import DropDown from "./DropDown";
import { useState } from "react";
import Disclamer from "./Disclamer";
import Co2EmissionGraph from "./Co2EmissionGraph";
import { formatDate } from "@/utils/helpers";

function EmissionsGraph({ motTestList, co2emission, vehicleInformation }) {
  // const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

  //new line
  const [expandedIndexes, setExpandedIndexes] = useState<number[]>(() =>
    Array.isArray(motTestList?.motList)
      ? motTestList.motList.map((_, idx) => idx)
      : []
  );

  // const toggleDropdown = (index: number) => {
  //   setExpandedIndex(expandedIndex === index ? null : index);
  // };

  const toggleDropdown = (index: number) => {
    setExpandedIndexes(
      prev =>
        prev.includes(index)
          ? prev.filter(i => i !== index) // collapse
          : [...prev, index] // expand
    );
  };

  return (
    <div className="cardBlock">
      { (co2emission != 0) ? 
      <Co2EmissionGraph
        co2emission={co2emission}
        vehicleInformation={vehicleInformation} />
        : ''}
      {Array.isArray(motTestList?.motList) ? (
        <div className={styles.EmissionsPageBlock}>
          <h4 className="d-flex align-items-center justify-content-center text-center font-weight-800 title-color">
            <i>
              <Image src="../assets/icon04.png" alt="icon04" />
            </i>
            MOT Test List
          </h4>
          <div className="MotTestListTable">
            <div className="MotTestListTableHead d-flex text-center">
              <span className="widthOne">Date</span>
              <span className="widthOne">Result</span>
              <span className="widthTwo">Mileage</span>
              <span className="widthOne">Test Number</span>
              <span className="widthFive">Reason</span>
              <span className="widthFour text-center">
                <Image src="../assets/addIcon.png" alt="addIcon" />
              </span>
            </div>

            {/* Table Content */}
            <div className="MotTestListTableContent" key={"emissiongraph"}>
              {Array.isArray(motTestList?.motList)
                ? motTestList.motList.map((test, index) => {
                    // const formattedDate = new Date(test.date).toLocaleDateString(
                    //   "en-GB"
                    // );
                    const formattedDate = formatDate(test.date);
                    const resultClass =
                      test.result === "PASSED" ? "greenBorder" : "redBorder";

                    const isExpanded = expandedIndexes.includes(index);
                    // const isExpanded = expandedIndex === index;

                    return (
                      <div key={index} className="MotTestListTableContentCard">
                        <div
                          // key={index}
                          className={`MotTestListTableContentCard d-flex align-items-center text-center cardBlockSmall ${resultClass}`}
                        >
                          <span className="widthOne">
                            <small>Date</small>
                            {formattedDate}
                          </span>

                          <span className="widthOne">
                            <small>Result</small>
                            <div
                              className={`resultShowCard ${resultClass} d-flex align-items-center`}
                            >
                              <i>
                                <Image
                                  src={
                                    test.result === "PASSED"
                                      ? "../assets/checkIcon1.png"
                                      : "../assets/closeIcon1.png"
                                  }
                                  alt="result-icon"
                                />
                              </i>
                              <span>{test?.result == 'PASSED' ? "PASS" : (test?.result == 'FAILED') ?  "FAIL" : test?.result}</span>
                            </div>
                          </span>

                          <span className="widthTwo">
                            <small>Mileage</small>
                            {test.mileage} {test.unit}
                          </span>

                          <span className="widthOne">
                            <small>Test Number</small>
                            {test?.motTesNumber}
                          </span>

                          <span className="widthFive">
                            <small>Reason</small>
                            <div className="contRight">
                              <small>
                                Failures <strong>({test.failureCount})</strong>
                              </small>

                              <small>
                                Advisories{" "}
                                <strong>({test.advisoryCount})</strong>
                              </small>
                            </div>
                          </span>

                          <span className="widthFour">
                            <div
                              className="addOpen"
                              onClick={() => toggleDropdown(index)}
                            >
                              {/* <Image
                              src={
                                test.result === "PASSED"
                                  ? "../assets/addIcon1.png"
                                  : "../assets/plusIcon.png"
                              }
                              alt="toggle-icon"
                              style={{ cursor: "pointer" }}
                            /> */}

                              {isExpanded ? (
                                <Image
                                  src={
                                    test.result === "PASSED"
                                      ? "../assets/green-minus.png"
                                      : "../assets/red-minus.png"
                                  }
                                  alt="toggle-icon"
                                  style={{ cursor: "pointer" }}
                                />
                              ) : (
                                <Image
                                  src={
                                    test.result === "PASSED"
                                      ? "../assets/addIcon1.png"
                                      : "../assets/plusIcon.png"
                                  }
                                  alt="toggle-icon"
                                  style={{ cursor: "pointer" }}
                                />
                              )}
                            </div>
                          </span>
                        </div>

                        {/* Dropdown Content */}
                        {isExpanded && <DropDown data={test} />}
                      </div>
                    );
                  })
                : null}
            </div>
          </div>
        </div>
      ) : null}
      <Disclamer />
    </div>
  );
}

export default EmissionsGraph;