import React, { useMemo } from 'react';
import classNames from 'classnames';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@wii/icons';
import Menu from '../../../menu';
import Layout from '../../../layout';
import BaseMenu from './BaseMenu';
import MenuCounter from './Counter';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const {
  Sider
} = Layout;
export const defaultRenderLogo = logo => {
  if (typeof logo === 'string') {
    return /*#__PURE__*/_jsx("img", {
      src: logo,
      alt: "logo"
    });
  }
  if (typeof logo === 'function') {
    return logo();
  }
  return logo;
};
export const defaultRenderLogoAndTitle = (props, renderKey = 'menuHeaderRender') => {
  const {
    logo,
    title,
    layout
  } = props;
  const renderFunction = props[renderKey || ''];
  if (renderFunction === false) {
    return null;
  }
  const logoDom = defaultRenderLogo(logo);
  const titleDom = /*#__PURE__*/_jsx("h1", {
    children: title
  });
  if (renderFunction) {
    // when collapsed, no render title
    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
  }
  if (layout === 'mix' && renderKey === 'menuHeaderRender') {
    return null;
  }
  return /*#__PURE__*/_jsxs("a", {
    children: [logoDom, props.collapsed ? null : titleDom]
  });
};
export const defaultRenderCollapsedButton = collapsed => collapsed ? /*#__PURE__*/_jsx(MenuUnfoldOutlined, {}) : /*#__PURE__*/_jsx(MenuFoldOutlined, {});
const SiderMenu = props => {
  const {
    collapsed,
    fixSiderbar,
    menuFooterRender,
    onCollapse,
    theme,
    siderWidth,
    collapsedWidth = 64,
    isMobile,
    onMenuHeaderClick,
    breakpoint = 'lg',
    style,
    layout,
    menuExtraRender = false,
    collapsedButtonRender = defaultRenderCollapsedButton,
    links,
    menuContentRender,
    prefixCls,
    onOpenChange,
    headerHeight,
    logoStyle
  } = props;
  const baseClassName = `${prefixCls}-sider`;
  const {
    flatMenuKeys
  } = MenuCounter.useContainer();
  const siderClassName = classNames(`${baseClassName}`, {
    [`${baseClassName}-fixed`]: fixSiderbar,
    [`${baseClassName}-layout-${layout}`]: layout && !isMobile,
    [`${baseClassName}-light`]: theme === 'light'
  });
  const headerDom = defaultRenderLogoAndTitle(props);
  const extraDom = menuExtraRender && menuExtraRender(props);
  const menuDom = menuContentRender !== false && flatMenuKeys && /*#__PURE__*/_jsx(BaseMenu, {
    ...props,
    mode: "inline",
    handleOpenChange: onOpenChange,
    style: {
      width: '100%'
    },
    className: `${baseClassName}-menu`
  });
  const linkMenuItems = useMemo(() => {
    const items = (links || []).map((node, index) => ({
      label: node,
      key: index,
      className: `${baseClassName}-link`
    }));
    if (collapsedButtonRender && !isMobile) {
      items.push({
        className: `${baseClassName}-collapsed-button`,
        // @ts-ignore
        title: false,
        onClick: () => {
          if (onCollapse) {
            onCollapse(!collapsed);
          }
        },
        key: '_collapsedBtn',
        label: collapsedButtonRender(collapsed)
      });
    }
    return items;
  }, [baseClassName, collapsed, collapsedButtonRender, isMobile, links, onCollapse]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [fixSiderbar && /*#__PURE__*/_jsx("div", {
      style: {
        width: collapsed ? collapsedWidth : siderWidth,
        overflow: 'hidden',
        flex: `0 0 ${collapsed ? collapsedWidth : siderWidth}px`,
        maxWidth: collapsed ? collapsedWidth : siderWidth,
        minWidth: collapsed ? collapsedWidth : siderWidth,
        transition: 'background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
        ...style
      }
    }), /*#__PURE__*/_jsxs(Sider, {
      collapsible: true,
      trigger: null,
      collapsed: collapsed,
      breakpoint: breakpoint === false ? undefined : breakpoint,
      onCollapse: collapse => {
        if (!isMobile) {
          if (onCollapse) {
            onCollapse(collapse);
          }
        }
      },
      collapsedWidth: collapsedWidth,
      style: {
        overflow: 'hidden',
        paddingTop: layout === 'mix' && !isMobile ? headerHeight : undefined,
        ...style
      },
      width: siderWidth,
      theme: theme,
      className: siderClassName,
      children: [headerDom && /*#__PURE__*/_jsx("div", {
        className: classNames(`${baseClassName}-logo`, {
          [`${baseClassName}-collapsed`]: collapsed
        }),
        onClick: layout !== 'mix' ? onMenuHeaderClick : undefined,
        id: "logo",
        style: logoStyle,
        children: headerDom
      }), extraDom && /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}-extra ${!headerDom && `${baseClassName}-extra-no-logo`}`,
        children: extraDom
      }), /*#__PURE__*/_jsx("div", {
        style: {
          flex: 1,
          overflowY: 'auto',
          overflowX: 'hidden'
        },
        children: menuContentRender ? menuContentRender(props, menuDom) : menuDom
      }), /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}-links`,
        children: /*#__PURE__*/_jsx(Menu, {
          theme: theme,
          className: `${baseClassName}-link-menu`,
          selectedKeys: [],
          openKeys: [],
          mode: "inline",
          items: linkMenuItems
        })
      }), menuFooterRender && /*#__PURE__*/_jsx("div", {
        className: classNames(`${baseClassName}-footer`, {
          [`${baseClassName}-footer-collapsed`]: !collapsed
        }),
        children: menuFooterRender(props)
      })]
    })]
  });
};
export default SiderMenu;