'use client';

import React, { LegacyRef, useRef, useState, useEffect } from 'react';
import clsx from 'clsx';
import Image from 'next/image';
import { DownOutlined, MenuOutlined, UpOutlined } from '@ant-design/icons';
import Link from 'next/link';
import { Drawer, Dropdown, FloatButton } from 'antd';

import logoSvg from '@/assets/pingcap-logo-while-line.svg';
import { BlueButton } from '@/components/BlueButton/BlueButton';
import { useContactForm } from '@/components/ContactForm/ContactFormModal';
import useTrack from '@/hooks/track';
import OutLink from '@/components/Link/OutLink';

import styles from './NavBar.module.sass';

export interface IProps extends React.ComponentPropsWithoutRef<'div'> {}

export const NavBar: React.FC<IProps> = (props) => {
  const { children, className, ...rest } = props;
  const [open, setOpen] = useState(false);

  useTrack();
  const { node, handleOpen } = useContactForm();

  const handleCloseDrawer = () => setOpen(false);

  const links = [
    {
      key: '产品与方案',
      href: undefined,
      children: (
        <Dropdown
          placement={'bottomLeft'}
          trigger={['click', 'hover']}
          autoAdjustOverflow={false}
          menu={{
            items: [
              {
                key: '平凯数据库',
                label: (
                  <Link href="/#product" onClick={handleCloseDrawer}>
                    平凯数据库
                  </Link>
                ),
              },
              {
                key: 'TiDB 社区版',
                label: (
                  <OutLink
                    href="https://github.com/pingcap/tidb"
                    onClick={handleCloseDrawer}
                  >
                    TiDB 社区版
                  </OutLink>
                ),
              },
              {
                key: '解决方案',
                label: (
                  <Link href="/solution" onClick={handleCloseDrawer}>
                    解决方案
                  </Link>
                ),
              },
              {
                key: '产品文档',
                label: (
                  <Link href="/document" onClick={handleCloseDrawer}>
                    产品文档
                  </Link>
                ),
              },
            ],
          }}
        >
          <span>
            产品与方案 <DownOutlined />
          </span>
        </Dropdown>
      ),
    },
    {
      key: '服务与支持',
      href: undefined,
      children: (
        <Dropdown
          placement={'bottomLeft'}
          trigger={['click', 'hover']}
          autoAdjustOverflow={false}
          menu={{
            items: [
              {
                key: '产品技术支持',
                label: (
                  <Link href="/product-support" onClick={handleCloseDrawer}>
                    产品技术支持
                  </Link>
                ),
              },
              {
                key: '工单系统登录',
                label: (
                  <OutLink
                    href="https://support.pingcap.cn"
                    onClick={handleCloseDrawer}
                  >
                    工单系统登录
                  </OutLink>
                ),
              },
              {
                key: 'learn',
                label: (
                  <OutLink
                    href="https://learn.pingcap.cn"
                    onClick={handleCloseDrawer}
                  >
                    培训与认证
                  </OutLink>
                ),
              },
            ],
          }}
        >
          <span>
            服务与支持 <DownOutlined />
          </span>
        </Dropdown>
      ),
    },
    {
      key: '社区',
      href: undefined,
      children: (
        <Dropdown
          placement={'bottomLeft'}
          trigger={['click', 'hover']}
          autoAdjustOverflow={false}
          menu={{
            items: [
              {
                key: '社区问答 - AskTUG',
                label: (
                  <OutLink
                    href="https://asktug.com"
                    onClick={handleCloseDrawer}
                  >
                    社区问答 - AskTUG
                  </OutLink>
                ),
              },
              // {
              //   key: '用户实践',
              //   label: (
              //     <Link href="/practice" onClick={handleCloseDrawer}>
              //       用户实践
              //     </Link>
              //   ),
              // },
              {key: 'blog', label: <Link href="/blog">技术博客</Link>},
            ],
          }}
        >
          <span>
            社区 <DownOutlined />
          </span>
        </Dropdown>
      ),
    },
    { key: '成功案例', href: '/case', children: '成功案例' },
    {
      key: '合作伙伴',
      href: undefined,
      children: (
        <Dropdown
          placement={'bottomLeft'}
          trigger={['click', 'hover']}
          autoAdjustOverflow={false}
          menu={{
            items: [
              {
                key: '合作伙伴概览',
                label: (
                  <Link href="/partner" onClick={handleCloseDrawer}>
                    合作伙伴概览
                  </Link>
                ),
              },
              {
                key: '联合解决方案',
                label: (
                  <Link href="/joint-solution" onClick={handleCloseDrawer}>
                    联合解决方案
                  </Link>
                ),
              },
              {
                key: '查找合作伙伴',
                label: (
                  <Link href="/search-partner" onClick={handleCloseDrawer}>
                    查找合作伙伴
                  </Link>
                ),
              },
              {
                key: '适配认证申请',
                label: (
                  <a
                    href="https://www.pingcap.cn/partner/compatibility_certification"
                    onClick={handleCloseDrawer}
                  >
                    适配认证申请
                  </a>
                ),
              },
            ],
          }}
        >
          <span>
            合作伙伴 <DownOutlined />
          </span>
        </Dropdown>
      ),
    },
    { key: '新闻报道', href: '/news', children: '新闻报道' },
    { key: '关于我们', href: '/about', children: '关于我们' },
    {
      key: '立即咨询',
      children: <BlueButton onClick={handleOpen}>立即咨询</BlueButton>,
    },
  ];

  useEffect(() => {
    if (typeof window !== "undefined" && window.location.hash === "#contact") {
      handleOpen();
    }
  }, []);

  return (
    <div className={styles.container} id={'navbar'}>
      <div className={styles.announcement}>
        <Link href="/news/announcement-sep-30">
          平凯数据库首批通过分布式数据库安全可靠测评。了解更多→
        </Link>
      </div>
      <div className={styles.navbar}>
        {node}
        <div className={styles.main}>
          <div className={styles.start}>
            <Link href={'/'}>
              <Image src={logoSvg} alt={'平凯星辰'} height={24} />
            </Link>
          </div>
          <div className={styles.end}>
            <ul>
              {links.map((value) => (
                <li key={value.key}>
                  {value.href ? (
                    <Link href={value.href}>{value.children}</Link>
                  ) : (
                    value.children
                  )}
                </li>
              ))}
            </ul>
            <MenuOutlined
              className={styles.menu}
              color={'#FFF'}
              onClick={() => setOpen((draft) => !draft)}
            />
          </div>
        </div>
        <Drawer
          className={styles.sidebar}
          // title="Basic Drawer"
          placement={'left'}
          closable={false}
          onClose={handleCloseDrawer}
          open={open}
          // key={placement}
        >
          <div className={styles.start}>
            <Link href={'/'} onClick={handleCloseDrawer}>
              <Image src={logoSvg} alt={'平凯星辰'} height={24} />
            </Link>
          </div>
          <ul>
            {links.map((value) => (
              <li key={value.key}>
                {value.href ? (
                  <Link href={value.href} onClick={handleCloseDrawer}>
                    {value.children}
                  </Link>
                ) : (
                  value.children
                )}
              </li>
            ))}
          </ul>
        </Drawer>
      </div>

      <FloatButton.BackTop
        icon={<UpOutlined style={{ color: '#FFF' }} />}
        className={styles.BackTop}
      />
    </div>
  );
};