import { ElementType } from 'react'
import type { SettingsItemProps } from '../types/SettingsItem.types'
import { SettingsAlert } from './items/SettingsAlert'
import { SettingsColor } from './items/SettingsColor'
import { SettingsInput } from './items/SettingsInput'
import { SettingsSelect } from './items/SettingsSelect'
import { SettingsSwitch } from './items/SettingsSwitch'
import { SettingsLine } from './items/SettingsLine'
import { SettingsPage } from './items/SettingsPage'
import { SettingsGroup } from './items/SettingsGroup'
import { SettingsLink } from './items/SettingsLink'

export function SettingsItem(props: SettingsItemProps) {
  const { label, description, type } = props
  const Component = settingsItemRander(type)
  return <Component {...props} />
}

type settingsItemRanderType = (type: SettingsItemProps['type']) => ElementType
const settingsItemRander: settingsItemRanderType = (type) => {
  if (type === 'switch') {
    return SettingsSwitch
  } else if (type === 'select') {
    return SettingsSelect
  } else if (type === 'input') {
    return SettingsInput
  } else if (type === 'color') {
    return SettingsColor
  } else if (type === 'alert') {
    return SettingsAlert
  } else if (type === 'line') {
    return SettingsLine
  } else if (type === 'page') {
    return SettingsPage
  } else if (type === 'group') {
    return SettingsGroup
  } else if (type === 'link') {
    return SettingsLink
  }

  return () => <></>
}
