import Radio from '@/components/ui/Radio'
import { useStoreState, useStoreActions } from '@/store'
import {
  NAV_MODE_DARK,
  NAV_MODE_LIGHT,
  NAV_MODE_THEMED,
  NAV_MODE_TRANSPARENT,
} from '@/constants/theme.constant'
import { NavMode } from '@/proxy/theme/models'
import { availableNavColorLayouts } from '@/proxy/theme/theme.config'

const NavModeSwitcher = () => {
  const { navMode, layout } = useStoreState((state) => state.theme)
  const { setNavMode } = useStoreActions((actions) => actions.theme)

  const onSetNavMode = (val: NavMode) => {
    setNavMode(val)
  }

  return (
    <Radio.Group value={navMode} onChange={onSetNavMode}>
      <Radio value={NAV_MODE_TRANSPARENT}>Transparent</Radio>
      {!availableNavColorLayouts.includes(layout.type) && (
        <>
          <Radio value={NAV_MODE_LIGHT}>Light</Radio>
          <Radio value={NAV_MODE_DARK}>Dark</Radio>
        </>
      )}
      <Radio value={NAV_MODE_THEMED}>Themed</Radio>
    </Radio.Group>
  )
}

export default NavModeSwitcher