import { SceneType, SceneTypeDesc } from 'constant'
import { useStoreState } from 'hook'
import { SceneTabContent } from './content'
import { Tabs } from 'components'

import type { ComponentType } from 'react'

export type ScenePageProps = {
  TabContent: ComponentType<{type: SceneType}>
}
export const ScenePage = ({ TabContent = SceneTabContent }: ScenePageProps) => {
  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 => <TabContent type={type} />}
    />
  )
}

export default ScenePage
export * from './header'
export * from './columns'
export * from './content'