import { CaretDownOutlined } from '@ant-design/icons';
import { IconFont } from '@gpustack/core-ui';
import { Link, useLocation } from '@umijs/max';
import { Tooltip } from 'antd';
import { createStyles, type FullToken } from 'antd-style';
import React, { useMemo, useState } from 'react';

interface MenuItem {
  icon?: string;
  selectedIcon?: string;
  defaultIcon?: string;
  children?: MenuItem[];

  [key: string]: any;
}

interface SiderMenuProps {
  menuData: MenuItem[];
  collapsed?: boolean;
  initialState: Global.InitialStateType;
}

const useStyles = createStyles(
  ({ css, token }: { css: any; token: FullToken }) => {
    console.log('useStyles', token);

    // @ts-ignore
    const { Menu } = token;

    return {
      siderMenu: css`
        &.sider-menu-collapsed {
          .menu-item {
            justify-content: center;
            padding: 0;
          }
        }
      `,
      groupTitle: css`
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        white-space: nowrap;
        padding: var(--ant-padding-xs) var(--ant-padding);
        font-size: 12px;
        padding-bottom: 4px;
        overflow: hidden;
        height: 30px;
        &:hover {
          .group-title-text {
            color: var(--ant-color-text);
          }
        }
        .anticon {
          transform: scale(0.8);
        }
        .group-title-text {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          color: var(--ant-color-text);
          font-weight: 400;
        }

        &.menu-item-group-title-collapsed {
          position: relative;
          height: 1px;
          padding-block: 0;
          padding-inline: 0;
          justify-content: center;
        }
      `,
      menuItemContent: css`
        margin: 2px 0;
        border-radius: 4px;
        overflow: hidden;
      `,
      menuItemWrapper: css`
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        cursor: pointer;
        position: relative;
        padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
        padding-left: 16px;
        overflow: hidden;
        white-space: nowrap;
        height: ${Menu.itemHeight}px;
        line-height: ${Menu.itemHeight}px;
        color: var(--ant-color-text-tertiary);
        &:hover {
          background-color: ${Menu.itemHoverBg};
          color: ${Menu.itemHoverColor};
        }
        &.menu-item-selected {
          background-color: ${Menu.menuItemSelectedBg};
          color: ${Menu.itemSelectedColor};

          .anticon {
            color: ${Menu.itemSelectedColor};
          }
        }
        &:active {
          background-color: ${Menu.itemActiveBg};
          color: ${Menu.itemActiveColor};
        }
        .anticon {
          font-size: 16px;
        }
        .icon-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }
      `,
      menuItemGroup: css`
        &.menu-item-group-hidden {
          display: none;
        }
      `,
      line: css`
        height: 1px;
        margin-block: 6px;
        background-color: ${token.colorSplit};
        position: absolute;
        left: -2px;
        right: -2px;
      `
    };
  }
);

const SiderMenu: React.FC<SiderMenuProps> = (props) => {
  const { menuData, collapsed } = props;
  const { styles, cx } = useStyles();
  const location = useLocation();
  const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
  console.log('SiderMenu', location.pathname);

  const dividerStyles = useMemo(() => {
    if (collapsed) {
      return {
        margin: '6px 0'
      };
    }
    return {
      margin: '6px 16px',
      width: 'unset',
      minWidth: 'unset',
      maxWidth: 'unset'
    };
  }, [collapsed]);

  const handleToggleGroup = (e: any, menuGroup: any) => {
    e.stopPropagation();

    console.log('handleToggleGroup', menuGroup.key);

    if (collapseKeys.has(menuGroup.key)) {
      collapseKeys.delete(menuGroup.key);
    } else {
      collapseKeys.add(menuGroup.key);
    }
    setCollapseKeys(new Set(collapseKeys));
  };

  const menuItemRender = (menuItem: MenuItem, key: string) => {
    return (
      <div
        className={cx(styles.menuItemContent, 'menu-item-content')}
        key={key}
      >
        <Link
          prefetch="intent"
          to={menuItem.path.replace('/*', '')}
          target={menuItem.target}
          className={cx(styles.menuItemWrapper, 'menu-item', {
            'menu-item-selected':
              location.pathname === menuItem.path ||
              menuItem.subMenu?.includes(location.pathname)
          })}
        >
          {collapsed ? (
            <Tooltip title={menuItem.name} placement="right">
              <span className="icon-wrapper">
                <IconFont
                  type={
                    location.pathname === menuItem.path ||
                    menuItem.subMenu?.includes(location.pathname)
                      ? menuItem.selectedIcon || ''
                      : menuItem.defaultIcon || ''
                  }
                ></IconFont>
              </span>
            </Tooltip>
          ) : (
            <>
              <IconFont
                type={
                  location.pathname === menuItem.path ||
                  menuItem.subMenu?.includes(location.pathname)
                    ? menuItem.selectedIcon || ''
                    : menuItem.defaultIcon || ''
                }
              ></IconFont>
              <span>{menuItem.name}</span>
            </>
          )}
        </Link>
      </div>
    );
  };

  return (
    <div
      className={cx(styles.siderMenu, 'sider-menu', {
        'sider-menu-collapsed': collapsed
      })}
    >
      {menuData.map((item: MenuItem, index: number) => (
        <div key={item.key}>
          {item.children && item.children.length > 0 ? (
            <>
              <div
                className={cx(styles.groupTitle, {
                  'menu-item-group-title-collapsed': collapsed
                })}
                onClick={(e) => handleToggleGroup(e, item)}
              >
                {!collapsed ? (
                  <span className="group-title-text">
                    <span>{item.name}</span>
                    <CaretDownOutlined
                      rotate={collapseKeys.has(item.key) ? -90 : 0}
                    ></CaretDownOutlined>
                  </span>
                ) : (
                  <span className={styles.line}></span>
                )}
              </div>
              <div
                className={cx(styles.menuItemGroup, {
                  'menu-item-group-collapsed': collapsed,
                  'menu-item-group-hidden':
                    !collapsed && collapseKeys.has(item.key)
                })}
              >
                {item.children?.map((child: MenuItem) =>
                  menuItemRender(child, child.key)
                )}
              </div>
            </>
          ) : (
            menuItemRender(item, item.key)
          )}
        </div>
      ))}
    </div>
  );
};

export default SiderMenu;
