import { Card } from 'antd'
import { useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'

import { WhitelistChangelog } from './Changelog'
import { SKUManagement } from './SKUManagement'
import { SPUManagement } from './SPUManagement'
import { WhitelistStrategy } from './WhitelistStrategy'

export const SKUService = () => {
  const history = useHistory()
  const { sku_component } = useParams<{
    sku_component: string
  }>()
  const [activeTabKey, setActiveTabKey] = useState<string>(sku_component)
  const onTabChange = (key: string) => {
    if (activeTabKey !== key) {
      history.push(`/sku_service/${key}`)
      setActiveTabKey(key)
    }
  }
  const tabList = [
    {
      key: 'spu',
      tab: 'SPU Management'
    },
    {
      key: 'sku',
      tab: 'SKU Management'
    },
    {
      key: 'whitelist',
      tab: 'SPU Whitelist Strategy'
    },
    {
      key: 'changelog',
      tab: 'Whitelist Strategy Change Log'
    }
  ]
  const contentList: Record<string, React.ReactNode> = {
    spu: <SPUManagement />,
    sku: <SKUManagement />,
    whitelist: <WhitelistStrategy />,
    changelog: <WhitelistChangelog />
  }

  return (
    <>
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </>
  )
}