import { useState, useEffect } from 'react';
import cl from 'classnames';
import { AIBPopover } from '../AIBPopover';
import styles from './index.module.css';

const content = [
  {
    label: 'Dropshipping Copilot',
    icon: 'https://ae01.alicdn.com/kf/S516f381ed7364da083b7c55b0964a2c3M/76x76.png',
    desc: 'Dropshipping with AI, Stay ahead in selling winning products',
    link: 'https://dscopilot.edgeshop.ai/',
    id: 'nav_dsc',
  },
  {
    label: 'AlphaRank',
    icon: 'https://ae01.alicdn.com/kf/Sf540fea0360040968b2e48fcfb7e728a9/76x76.png',
    desc: 'The Top Rated SEO Tool, Surge Traffic & Rankings by 50%+',
    link: 'https://alpha-rank.com/',
    id: 'nav_ar',
  },
  {
    label: 'PicCopilot',
    icon: 'https://ae01.alicdn.com/kf/S492cad4a0bb7463e87ad69812aa23923z/76x76.png',
    desc: 'Make your product images stand out',
    link: 'https://www.piccopilot.com/home',
    id: 'nav_pic',
  },
];

export const Header = () => {
  const [smallHeader, setSmallHeader] = useState(false);
  const navItems = [
    {
      content: (
        <AIBPopover
          label="Products"
          content={content}
          placement={smallHeader ? 'bottom' : 'bottomLeft'}
          overlayInnerStyle={
            smallHeader ? { top: '24px', left: '48px' } : { top: '12px' }
          }
        />
      ),
      link: '',
      id: 'product',
    },
    {
      content: 'Contact Us',
      link: '/contact-us',
      id: 'contact-us',
    },
  ];

  const handleScroll = () => {
    const scrollY = window.scrollY; // 获取垂直滚动的距离
    const headerHeight = 64; // 设置触发变化的滚动距离
    setSmallHeader(scrollY > headerHeight); // 根据滚动距离设置透明度
  };

  useEffect(() => {
    handleScroll();
    // 组件加载后添加滚动监听
    window.addEventListener('scroll', handleScroll);

    // 组件卸载前清除监听
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className={styles.wrapper}>
      <div
        className={cl(styles.container, { [styles.smallHeader]: smallHeader })}
      >
        <a className={styles.logoContainer} href="/" id={'home-logo'}>
          <img
            className={styles.logo}
            src="https://ae01.alicdn.com/kf/Sc6d254ae9ee8456191b69cb0cc47a7a4j/340x64.png"
            alt="edgeshop-log"
            width={172}
            height={32}
          />
        </a>
        <div className={styles.nav}>
          {navItems.map((item, index) => {
            if (item.link) {
              return (
                <a
                  key={index}
                  className={styles.navItem}
                  href={item.link}
                  id={item.id}
                >
                  {item.content}
                </a>
              );
            } else
              return (
                <div key={index} className={styles.navItem}>
                  {item.content}
                </div>
              );
          })}
        </div>
        <div className={styles.rightSide}>
          <a
            className={styles.getStartButton}
            href={'https://discord.gg/edgeshop'}
            target="_blank"
            id="header_discord"
          >
            <span>Join Discord</span>
          </a>
        </div>
      </div>
    </div>
  );
};