import React from 'react'
import LineGrapInput from './LineGrapInput'
import BarChartInput from './BarChartInput'
import PieChartInput from './PieChartInput'
import FlotingWidgetInput from './FlotingWidgetInput'
import FleetEfficiencyInputComponent from './FleetEfficiencyInputComponent'
import Progress1Input from './Progress1Input'
import Progress2Input from './Progress2Input'
import Widget2InputCard3D from './Widget2InputCard3D'
import Widget3InputCard3D from './Widget3InputCard3D'
import Widget4InputCard3D from './Widget4InputCard3D'
import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
import { useWidgetStore } from '../../../../../store/useWidgetStore'

// const InputSelecterComponent = () => {
//     const { selectedChartId } = useWidgetStore();

//   if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <BarChartInput />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <LineGrapInput />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <PieChartInput />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <PieChartInput />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <PieChartInput />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <Progress1Input />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
//     return (
//         <>
//         <div className="sideBarHeader">2D Widget Input</div>
//         <Progress2Input />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
//     return (
//         <>
//         <div className="sideBarHeader">Floting Widget Input</div>
//         <WarehouseThroughputInputComponent />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
//     return (
//         <>
//         <div className="sideBarHeader">Floting Widget Input</div>
//         <FleetEfficiencyInputComponent />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
//     return (
//         <>
//         <div className="sideBarHeader">Floting Widget Input</div>
//         <FleetEfficiencyInputComponent />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
//     return (
//         <>
//         <div className="sideBarHeader">3D Widget Input</div>
//         <Widget4InputCard3D />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
//     return (
//         <>
//         <div className="sideBarHeader">3D Widget Input</div>
//         <Widget2InputCard3D />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
//     return (
//         <>
//         <div className="sideBarHeader">3D Widget Input</div>
//         <Widget3InputCard3D />
//         </>
//       )
//   }

//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
//     return (
//         <>
//         <div className="sideBarHeader">3D Widget Input</div>
//         <Widget4InputCard3D />
//         </>
//       )
//   }

//   else {
//     return (
//         <div>No chart selected</div>
//       )
//   }
// }

const chartTypeMap: Record<| 'bar'| 'line'| 'pie' | 'doughnut' | 'polarArea'| 'progress 1' | 'progress 2'
  | 'ui-Widget 1'| 'ui-Widget 2'| 'ui-Widget 3'| 'ui-Widget 4',JSX.Element> = {
  bar: <BarChartInput />,
  line: <LineGrapInput />,
  pie: <PieChartInput />,
  doughnut: <PieChartInput />,
  polarArea: <PieChartInput />,
  'progress 1': <Progress1Input />,
  'progress 2': <Progress2Input />,
  'ui-Widget 1': <Widget4InputCard3D />,
  'ui-Widget 2': <Widget2InputCard3D />,
  'ui-Widget 3': <Widget3InputCard3D />,
  'ui-Widget 4': <Widget4InputCard3D />,
};

const classNameMap: Record<
  | 'warehouseThroughput floating'
  | 'fleetEfficiency floating'
  | 'floating total-card',
  JSX.Element
> = {
  'warehouseThroughput floating': <WarehouseThroughputInputComponent />,
  'fleetEfficiency floating': <FleetEfficiencyInputComponent />,
  'floating total-card': <FleetEfficiencyInputComponent />,
};

const InputSelecterComponent = () => {
  const { selectedChartId } = useWidgetStore();

  if (selectedChartId) {
    const { type, className } = selectedChartId;

    if (type && chartTypeMap[type as keyof typeof chartTypeMap]) {
      const label = ['ui-Widget 1', 'ui-Widget 2', 'ui-Widget 3', 'ui-Widget 4'].includes(type)
        ? '3D Widget Input'
        : '2D Widget Input';

      return (
        <>
          <div className="sideBarHeader">{label}</div>
          {chartTypeMap[type as keyof typeof chartTypeMap]}
        </>
      );
    }

    if (className && classNameMap[className as keyof typeof classNameMap]) {
      return (
        <>
          <div className="sideBarHeader">Floting Widget Input</div>
          {classNameMap[className as keyof typeof classNameMap]}
        </>
      );
    }
  }

  return <div>No chart selected</div>;
};

export default InputSelecterComponent;