"use client";
import React from "react";
import { ListGroup } from "react-bootstrap";
import { ElectricVehicleData as ElectricVehicleDataType } from "@/types/api";

interface ChargePortDetailsProps {
  electricVehicleData: ElectricVehicleDataType;
}

const ChargePortDetails: React.FC<ChargePortDetailsProps> = ({
  electricVehicleData
}) => {
  console.log(electricVehicleData);
  if (
    !electricVehicleData.ChargePortDetailsList ||
    electricVehicleData.ChargePortDetailsList.length === 0
  ) {
    return null;
  }

  return (
    <>
      {electricVehicleData.ChargePortDetailsList.map((port, index) => (
        <div key={index} className="cardBlock mb-4">
          <div className="carCardInfo">
            <div className="carCardInfoHead">
              <h4 className="text-center font-weight-800 title-color m-0">
                Charge Port Details - {index + 1}
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Port Type</span>
                  {port.PortType}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">
                    Max Charge Power Kw
                  </span>
                  {port.MaxChargePowerKw || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Port Location</span>
                  {port.PortLocation}
                </ListGroup.Item>

                {index == 0 && (
                  <ListGroup.Item as="li">
                    <span className="carCardInfoListTitle">
                      Charge Port Count
                    </span>
                    {electricVehicleData.ChargePortCount}
                  </ListGroup.Item>
                )}

                {index == 0 && (
                  <ListGroup.Item as="li">
                    <span className="carCardInfoListTitle">
                      Charge Port Details Count
                    </span>
                    {electricVehicleData.ChargePortDetailsCount}
                  </ListGroup.Item>
                )}
              </ListGroup>

              {port.ChargeTimes.AverageChargeTimes10To80Percent.length > 0 && (
                <div className="carCardInfoHead my-3">
                  <h5 className="text-center font-weight-600 title-color mb-0">
                    Average Charge Times 10 To 80 Percent
                  </h5>
                </div>
              )}

              <ListGroup as="ul">
                {port.ChargeTimes.AverageChargeTimes10To80Percent.map(
                  (time) => (
                    <>
                      <ListGroup.Item as="li">
                        <span className="carCardInfoListTitle">Charge Port Kw</span>
                       {time.ChargePortKw}
                      </ListGroup.Item>
                      <ListGroup.Item as="li">
                        <span className="carCardInfoListTitle">Time In Minutes </span>
                       {time.TimeInMinutes || 0}
                      </ListGroup.Item>
                    </>
                  )
                )}
              </ListGroup>
              {/* <ListGroup as="ul">
                {port.ChargeTimes.AverageChargeTimes10To80Percent.map((time, timeIndex) => (
                    <ListGroup.Item as="li" key={timeIndex} className="d-flex justify-content-between">
                      <div>
                        <span className="carCardInfoListTitle">Charge Port Kw &nbsp;</span>
                        <span>{time.ChargePortKw}</span>
                      </div>
                      <div>
                        <span className="carCardInfoListTitle">Charge Port Kw &nbsp;</span>
                        <span>{time.TimeInMinutes || 0}</span>
                      </div>
                    </ListGroup.Item>
                ))}
              </ListGroup> */}
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default ChargePortDetails;