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

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

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

  const motTestListData = useMemo(
    () =>
      motTestList?.motlist_combine_plate_change?.length > 0
        ? motTestList?.motlist_combine_plate_change
        : motTestList?.motList,
    [motTestList]
  );

  return (
    <div>
      {Array.isArray(motTestListData) ? (
        <div className="cardBlock">
          <div className={styles.MotTestListBlock}>
            <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">
              {/* Table Header */}
              <div className="MotTestListTableHead d-flex text-center">
                <span className="widthOne">Date</span>
                <span className="widthOne">Result</span>
                <span className="widthTwo">Mileage</span>
                <span className="widthTwo">Difference</span>
                <span className="widthTwo">Days</span>
                <span className="widthThree">Reason</span>
                <span className="widthFour text-center">
                  <Image src="../assets/addIcon.png" alt="addIcon" />
                </span>
              </div>

              {/* Table Content */}
              <div className="MotTestListTableContent">
                {motTestListData.map((test, index) => {
                  const formattedDate = formatDate(test.date);
                  const resultClass =
                    test.result === "PASSED" ? "greenBorder" : "redBorder";
                  const isExpanded = expandedIndex === index;

                  if (test.listtype === "platechange") {
                    return (
                      <div
                        key={index}
                        className="MotTestListTableContentCard plateChangeCard orangeBorder"
                      >
                        <div className="MotTestListTableContentCard d-flex align-items-center text-center cardBlockSmall orangeBorder">
                          <span className="widthOne">{formattedDate}</span>
                          {/* <span className="widthThree d-flex align-items-center mx-3">
                            <Image
                              src="../assets/icon03.png"
                              alt="warning"
                              style={{ width: 24, height: 24, marginRight: 8 }}
                            />
                            PLATE # {test.plate_number}
                          </span> */}

                          <span className="widthOne">
                            <small>Result</small>
                            <div
                              className={`resultShowCard orangeBorder d-flex align-items-center`}
                            >
                              <i>
                                <Image
                                  src="../assets/icon03.png"
                                  alt="warning"
                                />
                              </i>
                              <span>PLATE {test.plate_number}</span>
                            </div>
                          </span>


                          {/* <div className="plateBox d-flex align-items-center mx-2">
                            <Image
                              src="../assets/enter-reg.png"
                              alt="GB"
                              style={{ marginRight: 8 }}
                            />
                            <span>{test.previous}</span>
                          </div>
                          <span className="plateArrow mx-2">
                            <Image
                              src="../assets/arrowIcon1.png"
                              alt="arrow"
                              style={{}}
                            />
                          </span>
                          <div className="plateBox d-flex align-items-center mx-2">
                            <Image
                              src="../assets/enter-reg.png"
                              alt="GB"
                              style={{ marginRight: 8 }}
                            />
                            <span>{test.current}</span>
                          </div> */}


                          <div className="numberPlatBlock">
                            <ul key={index} className="d-flex align-items-center">
                              {/* <li>{plateChange?.length - index}</li>
                            <li style={{ textTransform: "capitalize" }}>{formatDate(data?.latest)}</li> */}
                              {/* <li>Plate # 06</li> */}
                              <div className="numberPlateList d-flex align-items-center">
                                <div className="numberPlateCard d-flex align-items-center">
                                  <i>
                                    <Image src="../assets/enter-reg.png" alt="enter-reg" />
                                  </i>
                                  <span className="text-center">{test.previous}</span>
                                </div>
                                <i className="arrowIconShow">
                                  <Image src="../assets/arrowIcon1.png" alt="arrowIcon1" />
                                </i>
                                <div className="numberPlateCard d-flex align-items-center">
                                  <i>
                                    <Image src="../assets/enter-reg.png" alt="enter-reg" />
                                  </i>
                                  <span>{test.current}</span>
                                </div>
                              </div>
                            </ul>
                          </div>


                        </div>
                      </div>
                    );
                  }

                  if (test.listtype === "keeper_changes") {
                    return (
                      <div
                        key={index}
                        className="MotTestListTableContentCard plateChangeCard orangeBorder"
                      >
                        <div className="MotTestListTableContentCard d-flex align-items-center text-center cardBlockSmall orangeBorder">
                          <span className="widthOne">{formattedDate}</span>

                          <span className="widthOne">
                            <small>Result</small>
                            <div
                              className={`resultShowCard orangeBorder d-flex align-items-center`}
                            >
                              <i>
                                <Image
                                  src="../assets/icon03.png"
                                  alt="warning"
                                />
                              </i>
                              <span>Keeper {test.count}</span>
                            </div>
                          </span>



                        </div>
                      </div>
                    );
                  }

                  return (
                    <div key={index} className="MotTestListTableContentCard">
                      <div
                        // key={index + test.mileage}
                        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="widthTwo">
                          <small>Difference</small>
                          {test.difference}
                        </span>

                        <span className="widthTwo">
                          <small>Days</small>
                          {test.days}
                        </span>

                        <span className="widthThree">
                          <div>
                            Failures
                            <strong>({test.failureCount})</strong>
                          </div>
                          <div>
                            Advisories
                            <strong>({test.advisoryCount})</strong>
                          </div>
                        </span>

                        <span className="widthFour">
                          <div
                            className="addOpen"
                            onClick={() => toggleDropdown(index)}
                          >
                            {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>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default MotTestList;