jan/web-app/src/containers/dynamicControllerSetting/index.tsx

import { InputControl } from '@/containers/dynamicControllerSetting/InputControl'
import { CheckboxControl } from '@/containers/dynamicControllerSetting/CheckboxControl'
import { DropdownControl } from '@/containers/dynamicControllerSetting/DropdownControl'
import { TextareaControl } from '@/containers/dynamicControllerSetting/TextareaControl'
import { SliderControl } from '@/containers/dynamicControllerSetting/SliderControl'

// Dynamic controller component that renders the appropriate control based on controller_type
type DynamicControllerProps = {
  key?: string
  title?: string
  className?: string
  description?: string
  controllerType: 'input' | 'checkbox' | 'dropdown' | 'textarea' | 'slider' | string
  controllerProps: {
    value?: string | boolean | number
    placeholder?: string
    type?: string
    options?: Array<{ value: number | string; name: string }>
    input_actions?: string[]
    rows?: number
    min?: number
    max?: number
    step?: number
  }
  onChange: (value: string | boolean | number) => void
}

export function DynamicControllerSetting({
  className,
  controllerType,
  controllerProps,
  onChange,
}: DynamicControllerProps) {
  if (controllerType === 'input') {
    return (
      <InputControl
        type={controllerProps.type}
        placeholder={controllerProps.placeholder}
        value={(controllerProps.value as string) || ''}
        inputActions={controllerProps.input_actions}
        className={className}
        onChange={(newValue) => onChange(newValue)}
      />
    )
  } else if (controllerType === 'checkbox') {
    return (
      <CheckboxControl
        checked={controllerProps.value as boolean}
        onChange={(newValue) => onChange(newValue)}
      />
    )
  } else if (controllerType === 'dropdown') {
    return (
      <DropdownControl
        value={controllerProps.value as string}
        options={controllerProps.options}
        onChange={(newValue) => onChange(newValue)}
      />
    )
  } else if (controllerType === 'textarea') {
    return (
      <TextareaControl
        placeholder={controllerProps.placeholder}
        value={(controllerProps.value as string) || ''}
        inputActions={controllerProps.input_actions}
        rows={controllerProps.rows}
        onChange={(newValue) => onChange(newValue)}
      />
    )
  } else if (controllerType === 'slider') {
    return (
      <SliderControl
        value={[controllerProps.value as number]}
        min={controllerProps.min}
        max={controllerProps.max}
        step={controllerProps.step}
        onChange={(newValue) => newValue && onChange(newValue[0])}
      />
    )
  }

  // Default to checkbox if controller type is not recognized
  return (
    <CheckboxControl
      checked={!!controllerProps.value}
      onChange={(newValue) => onChange(newValue)}
    />
  )
}