import { Dialog, Transition } from "@headlessui/react";
import { Dispatch, Fragment, SetStateAction, useState } from "react";
import { TanButton } from "../Buttons";
import PartDropdown from "./PartDropdown";
import { formatNumber } from "@/app/utils";
import type { Part, PartOption } from "@/types/parts";

type PartModalProps = {
  title: string;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  options: PartOption[];
  selectedOption: string;
  setSelectedOption: Dispatch<SetStateAction<string>>;
  parts: Part[];
  setParts: Dispatch<SetStateAction<Part[]>>;
  partIndex: number;
  setTotalCost: Dispatch<SetStateAction<number>>;
  setWorkHours: Dispatch<SetStateAction<number>>;
  setCo2Reduction: Dispatch<SetStateAction<number>>;
};

export default function PartModal({
  title,
  isOpen,
  setIsOpen,
  options,
  selectedOption,
  setSelectedOption,
  parts,
  setParts,
  partIndex,
  setTotalCost,
  setWorkHours,
  setCo2Reduction,
}: PartModalProps) {
  function handleModalSubmit() {
    // Right now the dropdown is setting the state on the selected option so we might not need
    setSelectedOption(optionInput);
    // recalculate total cost
    parts[partIndex].cost = costInput;
    setTotalCost(parts.reduce((sum, part) => sum + part.cost, 0));

    // recalculate total hours
    parts[partIndex].workHours = hoursInput;
    setWorkHours(parts.reduce((sum, part) => sum + part.workHours, 0));

    // recalculate total co2 reduction
    parts[partIndex].co2Reduction = co2ReductionInput;
    setCo2Reduction(parts.reduce((sum, part) => sum + part.co2Reduction, 0));

    setParts(parts);
    setIsOpen(false);
  }

  const [costInput, setCostInput] = useState<number>(parts[partIndex].cost);
  const [optionInput, setOptionInput] = useState<string>(selectedOption);
  const [hoursInput, setHoursInput] = useState<number>(
    parts[partIndex].workHours
  );
  const [co2ReductionInput, setCo2ReductionInput] = useState<number>(
    parts[partIndex].co2Reduction
  );

  return (
    <>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog
          as="div"
          className="relative z-10"
          onClose={() => setIsOpen(false)}
        >
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-1/2 max-w-screen-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-brandblue mb-3"
                  >
                    {title}
                  </Dialog.Title>
                  <div className="flex justify-center">
                    <div>
                      You can select different options for this part - this is
                      example functionality for demo
                    </div>
                    <PartDropdown
                      options={options}
                      onSelectOption={(option) => {
                        setOptionInput(option.part);
                        setCostInput(option.cost);
                        setHoursInput(option.workHours);
                        setCo2ReductionInput(option.co2Reduction);
                      }}
                      selectedOption={optionInput}
                    />
                  </div>

                  <div className="mt-4 flex justify-end gap-2">
                    <button
                      type="button"
                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                      onClick={() => setIsOpen(false)}
                    >
                      Cancel
                    </button>
                    <TanButton label={"Save"} onClick={handleModalSubmit} />
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  );
}
