import { CSSProperties, useState } from 'react';
import { ConfigProvider, Popover } from 'antd';
import { TooltipPlacement } from 'antd/es/tooltip';
import cl from 'classnames';
import styles from './index.module.css';

type AIBPopoverContentType = {
  label: string;
  icon: string;
  desc: string;
  link: string;
  id: string;
};

function isAIBPopoverContentType(item: any): item is AIBPopoverContentType {
  return (
    typeof item === 'object' &&
    item !== null &&
    item.hasOwnProperty('label') &&
    item.hasOwnProperty('icon') &&
    item.hasOwnProperty('desc')
  );
}

const AIBPopoverDropdown = (content: string[] | AIBPopoverContentType[]) => {
  if (content.length === 0) return;
  return (
    <div className={styles.itemContainer}>
      {content.map((item, index) => {
        if (!isAIBPopoverContentType(item)) {
          // TODO 处理非 AIBPopoverContentType 类型的情况
          return null;
        }
        return (
          <a
            key={index}
            className={styles.item}
            href={item.link}
            target="_blank"
            id={item.id}
          >
            <img
              className={styles.icon}
              src={item.icon}
              alt={item.label}
              width={38}
              height={38}
            />
            <div className={styles.itemInfo}>
              <div className={styles.label}>{item.label}</div>
              <div className={styles.desc}>{item.desc}</div>
            </div>
          </a>
        );
      })}
    </div>
  );
};

export const AIBPopover = ({
  label,
  content,
  placement = 'bottom',
  overlayInnerStyle,
}: {
  label: string;
  content: string[] | AIBPopoverContentType[];
  placement?: TooltipPlacement;
  overlayInnerStyle?: CSSProperties;
}) => {
  const [open, setOpen] = useState(false);
  const handleHoverPopover = (openFlag: boolean) => {
    setOpen(openFlag);
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          padding: 0,
          paddingSM: 0,
        },
        components: {
          Popover: {
            // titleMinWidth: 152,
          },
        },
      }}
    >
      <Popover
        content={AIBPopoverDropdown(content)}
        open={open}
        onOpenChange={handleHoverPopover}
        overlayClassName={styles.popover}
        placement={placement}
        arrow={false}
        overlayInnerStyle={{
          position: 'relative',
          width: 710,
          padding: '24px',
          borderRadius: 16,
          backgroundColor: '#ffffff0c',
          border: '1px solid #97979723',
          backdropFilter: 'blur(10px)',
          ...overlayInnerStyle,
        }}
      >
        <div className={styles.container}>
          <span className={styles.label}>{label}</span>
          <div
            className={cl(
              styles.arrowContainer,
              open && styles.arrowContainerActive
            )}
          >
            <span className={styles.arrowLeft} />
            <span className={styles.arrowRight} />
          </div>
        </div>
      </Popover>
    </ConfigProvider>
  );
};