import React, { useEffect, useState } from "react";
import { AIIcon } from "../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { AnalysisPresetsType } from "../../../../types/analysis";
import RenderAnalysisInputs from "./RenderAnalysisInputs";
import { useInputValues } from "../../../../store/builder/store";

const Analysis: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState("Throughput time");

  const handleSelect = (option: string) => {
    setSelectedOption(option); // Normalize for key matching
  };

  const AnalysisPresets: AnalysisPresetsType = {
    "Throughput time": [
      // { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
      // { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
      // { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
    ],
    "Production capacity": [
      { type: "range", inputs: { label: "Shift length", activeOption: "hr", defaultValue: 6 } },
      { type: "default", inputs: { label: "Shifts / day", activeOption: "unit", defaultValue: 2 } },
      { type: "default", inputs: { label: "Working days / year", activeOption: "days", defaultValue: 300 } },
      { type: "default", inputs: { label: "Yield rate", activeOption: "%", defaultValue: 92 } },
    ],
    ROI: [
      {
        type: "default",
        inputs: { label: "Selling price", activeOption: "INR", defaultValue: 800 },
      },
      {
        type: "default",
        inputs: { label: "Material cost", activeOption: "INR", defaultValue: 300 },
      },
      {
        type: "default",
        inputs: { label: "Labor Cost", activeOption: "INR", defaultValue: 150 },
      },
      {
        type: "default",
        inputs: { label: "Maintenance cost", activeOption: "INR", defaultValue: 1200 },
      },
      {
        type: "default",
        inputs: { label: "Electricity cost", activeOption: "INR", defaultValue: 840 },
      },
      {
        type: "default",
        inputs: { label: "Fixed costs", activeOption: "INR", defaultValue: 1250 },
      },
      {
        type: "default",
        inputs: { label: "Initial Investment", activeOption: "INR", defaultValue: 1500000 },
      },
      {
        type: "default",
        inputs: { label: "Salvage value", activeOption: "Day", defaultValue: 565 },
      },
      {
        type: "default",
        inputs: { label: "Production period", activeOption: "yrs", defaultValue: 5 },
      },
      {
        type: "default",
        inputs: { label: "Tax rate", activeOption: "%", defaultValue: 30 },
      },
    ],
  };

  useEffect(() => {
    Object.values(AnalysisPresets).forEach((category) => {
      category.forEach((item) => {
        const { label, defaultValue } = item.inputs;
        if (defaultValue !== undefined) {
          updateInputValue(label, defaultValue.toString());
        }
      });
    });
  }, []);

  const { inputValues, setInputValues, updateInputValue } = useInputValues();

  return (
    <div className="analysis-main-wrapper">
      <div className="analysis-main-container">
        <div className="header">Object</div>
        <div className="generate-report-button">
          <AIIcon /> Generate Report
        </div>
        <div className="analysis-content-container section">
          <div className="dropdown-header-container">
            <div className="value">Create Analysis</div>
          </div>
          <div className="dropdown-content-container">
            <RegularDropDown
              header={selectedOption}
              options={["Throughput time", "Production capacity", "ROI"]}
              onSelect={handleSelect}
              search={false}
            />
          </div>
          {/* Render only the selected option */}
          <RenderAnalysisInputs
            keyName={selectedOption}
            presets={
              AnalysisPresets[selectedOption as keyof AnalysisPresetsType]
            }
            inputValues={inputValues}
            onInputChange={(label, value) => {
              updateInputValue(label, value);
            }}
          />
          <div className="buttons-container">
            <input type="button" value={"Clear"} className="cancel" onClick={() => setInputValues({})} />
            <input type="button" value={"Update"} className="submit" onClick={() => setInputValues(inputValues)} />
          </div>
          <div className="create-custom-analysis-container">
            <div className="custom-analysis-header">Create Custom Analysis</div>
            <div className="content">
              Click <span>'Create'</span> to enhances decision-making by
              providing actionable insights, optimizing operations that adapts
              to the unique challenges.
            </div>
            <div className="input">
              <input type="button" value={"Create"} className="submit" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Analysis;