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>
      )
  }
}

export default InputSelecterComponent