import { Center, Loader, Modal, Tabs } from '@tidbcloud/uikit'
import { Suspense, useEffect, useState } from 'react'

import { eventTracking } from 'dbaas/utils/tracking'

import { AuthorizedApps, Terms } from '../features'
import { General } from '../features'

import { useAccountNavList } from './navbar/helpers'

export const AccountShell = ({ opened = false, onClose }: { opened?: boolean; onClose: () => void }) => {
  const navList = useAccountNavList()
  const [activeTab, setActiveTab] = useState<string>('general')

  useEffect(() => {
    if (!opened) {
      setTimeout(() => {
        setActiveTab('general')
      }, 100)
    }
  }, [opened])

  return (
    <div>
      <Modal
        title="Account Settings"
        opened={opened}
        keepMounted={false}
        onClose={onClose}
        size={1200}
        withinPortal
        styles={{
          content: { height: 'calc(100dvh - var(--modal-y-offset) * 2)' },
          body: { height: 'calc(100% - 62px)', overflow: 'auto' }
        }}
      >
        <Tabs
          value={activeTab}
          styles={() => ({
            root: {
              padding: '0 24px',
              paddingBottom: 24
            },
            list: {
              '::before': {
                border: 'none'
              }
            },
            tabLabel: {
              fontSize: 14
            }
          })}
        >
          <Tabs.List>
            {navList.map((nav) => {
              if (!nav.visible) {
                return null
              }
              return (
                <Tabs.Tab
                  key={nav.path}
                  value={nav.path}
                  onClick={() => {
                    eventTracking(nav.mpEvent)
                    setActiveTab(nav.path)
                  }}
                >
                  {nav.label}
                </Tabs.Tab>
              )
            })}
          </Tabs.List>
          <Suspense
            fallback={
              <Center mt={64} w="100%">
                <Loader />
              </Center>
            }
          >
            <Tabs.Panel value="general">
              <General />
            </Tabs.Panel>
            <Tabs.Panel value="terms">
              <Terms />
            </Tabs.Panel>
            <Tabs.Panel value="authorized-apps">
              <AuthorizedApps />
            </Tabs.Panel>
          </Suspense>
        </Tabs>
      </Modal>
    </div>
  )
}