import { SceneType, SceneTypeDesc } from 'constant'
import { useStoreState } from 'hook'
import { Tabs } from 'components'
import { SceneList } from './list'

const ScenePage = () => {
  const [type, setType] = useStoreState(
    'scene-page-type', 
    SceneType.SWSS,
    str => Number(str) as SceneType
  )
  const tabItems = Object.entries(SceneTypeDesc)
    .map(([key, val]) => [Number(key) as SceneType, val] as const)


  return (
    <Tabs
      items={tabItems} 
      active={type} 
      onChange={type => setType(Number(type))} 
      renderContent={type => <SceneList type={type} />}
    />
  )
}

export default ScenePage