import {
  PieChartOutlined,
  TeamOutlined,
  ClusterOutlined,
  ProfileOutlined,
  HistoryOutlined,
  SettingOutlined,
  SolutionOutlined,
  DeploymentUnitOutlined,
  SafetyCertificateOutlined,
  UnorderedListOutlined,
  MonitorOutlined,
  NodeIndexOutlined,
  ShareAltOutlined,
  RocketOutlined,
  GoldOutlined,
  FormOutlined,
  NotificationOutlined,
  UserOutlined,
  ScheduleOutlined,
  CalendarOutlined,
  AmazonOutlined,
  GoogleOutlined,
  IdcardOutlined,
  FileProtectOutlined,
  AppstoreOutlined,
  DollarOutlined,
  ReconciliationOutlined,
  EditOutlined,
  DiffOutlined,
  BankOutlined,
  ProductOutlined,
  BuildOutlined,
  CloudServerOutlined,
  BlockOutlined,
  RobotOutlined,
  SwapOutlined
} from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import SubMenu from 'antd/lib/menu/SubMenu'
import config from 'config'
import React, { useState, useMemo } from 'react'
import { Link, useLocation } from 'react-router-dom'
import useProfileContext from 'useProfileContext'

import type { V1PrincipalProfileRoles } from 'apiClient/services/core-server/interface'
import logoThumbnail from 'images/logo-thumbnail.svg'
import logo from 'images/logo.svg'
import { capitalize } from 'utils/string'

const { Sider } = Layout

interface Item {
  name: string
  title?: string
  icon: JSX.Element
  submenus?: Item[]
  link?: string
}

const adminItems: Item[] = [
  {
    name: 'admin',
    icon: <HistoryOutlined />,
    submenus: [
      {
        name: 'audits',
        icon: <HistoryOutlined />
      },
      {
        name: 'privilege',
        icon: <ReconciliationOutlined />
      },
      {
        name: 'calendar',
        icon: <CalendarOutlined />
      },
      {
        name: 'agents',
        title: 'Agents',
        icon: <RobotOutlined />
      },
      {
        name: 'IAM',
        title: 'IAM',
        icon: <FileProtectOutlined />,
        submenus: [
          {
            name: 'iam/entity',
            title: 'Entity',
            icon: <UserOutlined />
          },
          {
            name: 'iam/role',
            title: 'Role',
            icon: <IdcardOutlined />
          }
        ]
      }
    ]
  }
]

const baseItemsDefault: Item[] = [
  {
    name: 'overview',
    icon: <PieChartOutlined />
  },
  {
    name: 'orgs',
    icon: <ClusterOutlined />
  },
  {
    name: 'devops',
    title: 'DevOps',
    icon: <DeploymentUnitOutlined />,
    submenus: [
      {
        name: 'release',
        icon: <UnorderedListOutlined />
      },
      {
        name: 'maintenance',
        icon: <NodeIndexOutlined />
      },
      {
        name: 'operations',
        icon: <ShareAltOutlined />
      },
      {
        name: 'jumps',
        icon: <RocketOutlined />
      },
      {
        name: 'k8sUpgradeTask',
        icon: <SafetyCertificateOutlined />
      },
      {
        name: 'k8scalendar',
        title: 'K8s Calendar',
        icon: <CalendarOutlined />
      },
      {
        name: 'k8supgradeplan',
        title: 'K8s Upgrade Plan',
        icon: <SafetyCertificateOutlined />
      },
      {
        name: 'premiumUpgradePlans',
        title: 'Premium Upgrade Plans',
        icon: <BuildOutlined />
      },
      {
        name: 'sharedResourcePool',
        title: 'SharedResourcePool',
        icon: <ShareAltOutlined />
      },
      {
        name: 'deployments',
        title: 'Region Deployments',
        icon: <CloudServerOutlined />
      },
      {
        name: 'cluster-migration',
        title: 'Cluster Migration',
        icon: <SwapOutlined />
      }
    ]
  },
  {
    name: 'eventCenter',
    icon: <ProfileOutlined />,
    submenus: [
      {
        name: 'incidents',
        icon: <ProfileOutlined />
      },
      {
        name: 'remediation_tickets',
        title: 'Remediation Tickets',
        icon: <ProfileOutlined />
      }
    ]
  },
  {
    name: 'monitor',
    title: 'Monitor',
    icon: <MonitorOutlined />,
    submenus: [
      {
        name: 'certification',
        icon: <SafetyCertificateOutlined />
      },
      {
        name: 'infraInformation',
        icon: <BankOutlined />,
        title: 'Infra Information'
      },
      {
        name: 'component-diff',
        title: 'Component Diff',
        icon: <DiffOutlined />
      }
    ]
  },
  {
    name: 'settings',
    title: 'DBaaS Settings',
    icon: <SettingOutlined />,
    submenus: [
      {
        name: 'business',
        icon: <SettingOutlined />
      },
      {
        name: 'rbac',
        title: 'RBAC',
        icon: <SolutionOutlined />
      },
      {
        name: 'regions',
        title: 'Region',
        icon: <ProfileOutlined />
      },
      {
        name: 'feature_whitelist',
        title: 'Feature Whitelist',
        icon: <BlockOutlined />
      }
    ]
  },
  {
    name: 'partner',
    title: 'Partner',
    icon: <TeamOutlined />,
    submenus: [
      {
        name: 'msp',
        title: 'MSP',
        icon: <GoldOutlined />
      },
      {
        name: 'cppo',
        title: 'AWS CPPO Reseller',
        icon: <AmazonOutlined />
      },
      {
        name: 'mcpo',
        title: 'GCP MCPO Reseller',
        icon: <GoogleOutlined />
      },
      {
        name: 'reseller',
        title: 'Reseller',
        icon: <ProductOutlined />
      }
    ]
  },
  {
    name: 'configcenter',
    title: 'Config Center',
    icon: <FormOutlined />,
    submenus: [
      {
        name: 'version',
        title: 'Default Version',
        icon: <FormOutlined></FormOutlined>
      },
      {
        name: 'component',
        icon: <FormOutlined></FormOutlined>
      },
      {
        name: 'kernel-images',
        title: 'Kernel Images',
        icon: <AppstoreOutlined />,
        link: '/kernel-images'
      },
      {
        name: 'dict',
        icon: <FormOutlined></FormOutlined>
      },
      {
        name: 'template',
        icon: <FormOutlined></FormOutlined>
      }
    ]
  },
  {
    name: 'notification',
    title: 'Notification',
    icon: <NotificationOutlined />
  },
  {
    name: 'skus',
    title: 'SKU Management',
    icon: <AppstoreOutlined />,
    submenus: [
      {
        name: 'sku_editor',
        title: 'SKU Editor',
        icon: <DollarOutlined />
      },
      {
        name: 'sku_service',
        title: 'SPU/SKU Service',
        icon: <EditOutlined />
      }
    ]
  },
  {
    name: 'userbehavior',
    title: 'User Behavior',
    icon: <UserOutlined />,
    submenus: [
      {
        name: 'userbehavior_subscriptions',
        title: 'User Behavior Subscriptions',
        icon: <ScheduleOutlined />
      }
    ]
  },
  {
    name: 'aiops',
    title: 'AIOps',
    icon: <BuildOutlined />,
    submenus: [
      {
        name: 'issues',
        icon: <UnorderedListOutlined />,
        link: '/aiops/issues'
      },
      {
        name: 'alerts',
        icon: <UnorderedListOutlined />,
        link: '/aiops/alerts'
      }
    ]
  }
]

const baseItemsCN: Item[] = [
  {
    name: 'overview',
    icon: <PieChartOutlined />
  },
  {
    name: 'orgs',
    icon: <ClusterOutlined />
  },
  {
    name: 'devops',
    title: 'DevOps',
    icon: <DeploymentUnitOutlined />,
    submenus: [
      {
        name: 'release',
        icon: <UnorderedListOutlined />
      },
      {
        name: 'maintenance',
        icon: <NodeIndexOutlined />
      },
      {
        name: 'operations',
        icon: <ShareAltOutlined />
      },
      {
        name: 'jumps',
        icon: <RocketOutlined />
      },
      {
        name: 'sharedResourcePool',
        title: 'SharedResourcePool',
        icon: <ShareAltOutlined />
      },
      {
        name: 'deployments',
        title: 'Region Deployments',
        icon: <CloudServerOutlined />
      }
    ]
  },
  {
    name: 'settings',
    title: 'DBaaS Settings',
    icon: <SettingOutlined />,
    submenus: [
      {
        name: 'business',
        icon: <SettingOutlined />
      },
      {
        name: 'rbac',
        title: 'RBAC',
        icon: <SolutionOutlined />
      },
      {
        name: 'regions',
        title: 'Region',
        icon: <ProfileOutlined />
      }
    ]
  },
  {
    name: 'configcenter',
    title: 'Config Center',
    icon: <FormOutlined />,
    submenus: [
      {
        name: 'kernel-images',
        title: 'Kernel Images',
        icon: <AppstoreOutlined />,
        link: '/kernel-images'
      }
    ]
  }
]

function SidebarItems(roles?: V1PrincipalProfileRoles) {
  const baseItems = config.PARTITION === 'CN' ? baseItemsCN : baseItemsDefault

  if (roles?.admin) {
    return [...baseItems, ...adminItems]
  }

  return baseItems
}

function renderSidebarItem(item: Item): React.ReactNode {
  if (item.submenus !== undefined) {
    return (
      <SubMenu
        key={item.name}
        icon={item.icon}
        title={item.title || capitalize(item.name)}
      >
        {item.submenus.map(renderSidebarItem)}
      </SubMenu>
    )
  }

  return (
    <Menu.Item key={item.name} icon={item.icon}>
      <Link to={item.link ? item.link : `/${item.name}`}>
        {item.title || capitalize(item.name)}
      </Link>
    </Menu.Item>
  )
}

export default () => {
  const [collapsed, setCollapsed] = useState(false)
  const { pathname } = useLocation()
  const {
    profile: { roles }
  } = useProfileContext()

  const allowedLinks = useMemo(() => SidebarItems(roles), [roles])

  const handleCollapse = (collapsed: boolean) => {
    setCollapsed(collapsed)
  }

  const openedkeys = [pathname.slice(1).split('/')[0] || '']

  return (
    <Sider
      className="app-sidebar"
      breakpoint="md"
      collapsible
      collapsed={collapsed}
      onCollapse={handleCollapse}
    >
      <div className="logo" style={{ marginBottom: '30px' }}>
        <img src={collapsed ? logoThumbnail : logo} alt="TiDB Cloud" />
      </div>

      <Menu theme="dark" selectedKeys={openedkeys} mode="inline">
        {allowedLinks.map(renderSidebarItem)}
      </Menu>
    </Sider>
  )
}