Dwinzo_dev/app/src/components/layout/sidebarRight/analysis/Analysis.tsx

import React, { useState } from "react";
import { AI_Icon } from "../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { AnalysisPresetsType } from "../../../../types/analysis";
import RenderAnalysisInputs from "./RenderAnalysisInputs";

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: "Height", activeOption: "mm" } },
      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
      {
        type: "default",
        inputs: { label: "Raw Material", activeOption: "mm" },
      },
      {
        type: "range",
        inputs: { label: "Material flow", activeOption: "m/min" },
      },
    ],
    "Production capacity": [
      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
      {
        type: "default",
        inputs: { label: "Raw Material", activeOption: "mm" },
      },
      {
        type: "range",
        inputs: { label: "Material flow", activeOption: "m/min" },
      },
      {
        type: "range",
        inputs: { label: "Shift 1", activeOption: "hr(s)" },
      },
      {
        type: "range",
        inputs: { label: "Shift 2", activeOption: "hr(s)" },
      },
      {
        type: "range",
        inputs: { label: "Over time", activeOption: "hr(s)" },
      },
    ],
    ROI: [
      {
        type: "default",
        inputs: { label: "Equipment Cost", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Employee Salary", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Labor Cost", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Cost per unit", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Electricity cost", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Upkeep Cost", activeOption: "INR" },
      },
      {
        type: "default",
        inputs: { label: "Working Hours", activeOption: "Hrs" },
      },
      {
        type: "default",
        inputs: { label: "Power Usage", activeOption: "KWH" },
      },
      { type: "default", inputs: { label: "KWH", activeOption: "Mos" } },
      {
        type: "default",
        inputs: { label: "Man Power", activeOption: "Person" },
      },
    ],
  };

  return (
    <div className="analysis-main-wrapper">
      <div className="analysis-main-container">
        <div className="header">Object</div>
        <div className="generate-report-button">
          <AI_Icon /> Generate Report
        </div>
        <div className="analysis-content-container">
          <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]
            }
          />
          <div className="buttons-container">
            <input type="button" value={"Clear"} className="cancel" />
            <input type="button" value={"Calculate"} className="submit" />
          </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;