import { Dispatch, SetStateAction, useState } from "react";
import PartModal from "./PartModal";
import { formatNumber } from "@/app/utils";
import type { Part, PartOption } from "@/types/parts";
import { roundToDecimalPlaces } from "@/app/utils";

type PlanPartProps = {
  partIndex: number;
  title: string;
  cost: number;
  co2Reduction: number;
  workHours: number;
  parts: Part[];
  option: string | undefined;
  setParts: Dispatch<SetStateAction<Part[]>>;
  setTotalCost: Dispatch<SetStateAction<number>>;
  setWorkHours: Dispatch<SetStateAction<number>>;
  setCo2Reduction: Dispatch<SetStateAction<number>>;
};

export default function PlanPart({
  partIndex,
  title,
  cost,
  co2Reduction,
  workHours,
  parts,
  option,
  setParts,
  setTotalCost,
  setWorkHours,
  setCo2Reduction,
}: PlanPartProps) {
  const [isOpen, setIsOpen] = useState(false);

  // These are temporary options for the demo
  // const options: PartOption[] = [
  //   {
  //     label: option || "option 1" + ": £" + formatNumber(cost + 0.05 * cost),
  //     part: option || "option 1",
  //     cost: cost + 0.05 * cost,
  //     co2Reduction: co2Reduction - 0.05 * co2Reduction,
  //     workHours: workHours + 0.05 * workHours,
  //   },
  //   {
  //     label: "option 2: £" + formatNumber(cost + 0.1 * cost),
  //     part: "option 2",
  //     cost: cost + 0.1 * cost,
  //     co2Reduction: co2Reduction - 0.1 * co2Reduction,
  //     workHours: workHours + 0.1 * workHours,
  //   },
  //   {
  //     label: "option 3: £" + formatNumber(cost + 0.15 * cost),
  //     part: "option 3",
  //     cost: cost + 0.15 * cost,
  //     co2Reduction: co2Reduction - 0.15 * co2Reduction,
  //     workHours: workHours + 0.15 * workHours,
  //   },
  //   {
  //     label: "option 4: £" + formatNumber(cost + 0.2 * cost),
  //     part: "option 4",
  //     cost: cost + 0.2 * cost,
  //     co2Reduction: co2Reduction - 0.2 * co2Reduction,
  //     workHours: workHours + 0.2 * workHours,
  //   },
  //   {
  //     label: "option 5: £" + formatNumber(cost + 0.25 * cost),
  //     part: "option 5",
  //     cost: cost + 0.25 * cost,
  //     co2Reduction: co2Reduction - 0.25 * co2Reduction,
  //     workHours: workHours + 0.25 * workHours,
  //   },
  // ];

  const options: PartOption[] = [
    {
      label: option || "option 1" + ": £" + formatNumber(cost + 0.05 * cost),
      part: option || "option 1",
      cost: cost + 0.05 * cost,
      co2Reduction: co2Reduction - 0.05 * co2Reduction,
      workHours: workHours + 0.05 * workHours,
    },
    {
      label: "250mm insulation: £" + formatNumber(cost + 0.1 * cost),
      part: "250mm insulation",
      cost: cost + 0.1 * cost,
      co2Reduction: co2Reduction - 0.1 * co2Reduction,
      workHours: workHours + 0.1 * workHours,
    },
    {
      label: "300mm insulation: £" + formatNumber(cost + 0.15 * cost),
      part: "300mm insulation",
      cost: cost + 0.15 * cost,
      co2Reduction: co2Reduction - 0.15 * co2Reduction,
      workHours: workHours + 0.15 * workHours,
    },
    {
      label: "350mm insulation: £" + formatNumber(cost + 0.2 * cost),
      part: "350mm insulation",
      cost: cost + 0.2 * cost,
      co2Reduction: co2Reduction - 0.2 * co2Reduction,
      workHours: workHours + 0.2 * workHours,
    },
    {
      label: "400mm insulation: £" + formatNumber(cost + 0.25 * cost),
      part: "400mm insulation",
      cost: cost + 0.25 * cost,
      co2Reduction: co2Reduction - 0.25 * co2Reduction,
      workHours: workHours + 0.25 * workHours,
    },
  ];

  const [selectedOption, setSelectedOption] = useState(options[0].part);

  return (
    <div
      onClick={() => {
        setIsOpen(true);
      }}
      className="active:bg-blue-700 focus:outline-none transition-colors duration-200 flex bg-white p-4 rounded-lg shadow mb-4 items-center border-l-4 border-l-brandmidblue hover:bg-brandmidblue hover:text-white hover:border-l-brandtan cursor-pointer"
    >
      <h2 className="flex-1 text-lg font-bold mb-2 text-left">{title}</h2>
      <div>{selectedOption}</div>
      <div className="flex-1 text-center">
        <p>Cost: £{parts[partIndex].cost}</p>
      </div>
      <div className="flex-1 text-center">
        <p>
          CO2 Saved: {roundToDecimalPlaces(parts[partIndex].co2Reduction, 2)}
        </p>
      </div>
      <div className="flex-1 text-center">
        <p>Work Hours: {parts[partIndex].workHours}</p>
      </div>
      <PartModal
        title={title}
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        options={options}
        selectedOption={selectedOption}
        setSelectedOption={setSelectedOption}
        parts={parts}
        setParts={setParts}
        partIndex={partIndex}
        setTotalCost={setTotalCost}
        setWorkHours={setWorkHours}
        setCo2Reduction={setCo2Reduction}
      />
    </div>
  );
}
