import { CssProps, MediaQueryRange } from 'lupine.components';
import { IconMenuItemProps } from './icon-menu-item-props';

export interface MobileFooterMenuProps {
  items: IconMenuItemProps[];
  color?: string;
  activeColor?: string;
  topoutColor?: string;
  topoutBackgroundColor?: string;
}
export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
  const css: CssProps = {
    '.footer-menu': {
      display: 'none',
      // position: 'fixed',
      // left: 0,
      // right: 0,
      // bottom: 0,
      width: '100%',
      background: 'var(--sidebar-bg-color)',
      paddingBottom: 'env(safe-area-inset-bottom)',
      minHeight: '50px',
      justifyContent: 'space-around',
      alignItems: 'center',
      borderTop: 'var(--primary-border)',
    },
    '.footer-menu, .footer-menu a': {
      textDecoration: 'none',
      color: props.color || 'var(--primary-color)',
    },
    '.footer-menu .footer-menu-item': {
      padding: '4px 0',
      fontSize: '11px',
      height: '55px', // 和主页保留的底部菜单高度一致
      width: '55px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    },
    '.footer-menu .footer-menu-item i': {
      display: 'block',
      fontSize: '22px',
      marginBottom: '4px',
    },
    '.footer-menu .footer-menu-item.footer-menu-topout': {
      marginTop: '-43px',
      borderRadius: '50%',
      backgroundColor: props.topoutBackgroundColor || '#f33939',
      color: props.topoutColor || 'var(--primary-color)',
    },
    '.footer-menu .footer-menu-item-a': {
      zIndex: 'var(--layer-header-footer)',
    },
    '.footer-menu .footer-menu-item.active': {
      color: props.activeColor || 'var(--primary-accent-color)',
    },
    [MediaQueryRange.TabletBelow]: {
      '.footer-menu': {
        display: 'flex',
      },
    },
  };
  const onClick = (index: number, href: string) => {
    const items = document.querySelector('.footer-menu-item.active');
    items?.classList.remove('active');
    // find footer-menu-item by index
    const item = document.querySelector(`a:nth-child(${index + 1}) .footer-menu-item`);
    item?.classList.add('active');
  };
  let curretnUrl = typeof window !== 'undefined' ? window.location.pathname : '';
  return (
    <div css={css} class='footer-menu-box'>
      <div class='footer-menu'>
        {props.items.map((item, index) => {
          const handleClick = (e: Event) => {
            if (item.js) {
              e.preventDefault();
              item.js();
            }
          };

          return (
            <a class='footer-menu-item-a' href={item.url || 'javascript:void(0)'} key={index} onClick={handleClick}>
              <div
                class={`footer-menu-item ${item.topout ? 'footer-menu-topout' : ''} ${
                  curretnUrl === item.url ? 'active' : ''
                }`}
                onClick={() => onClick(index, item.url)}
              >
                <i class={`ifc-icon ${item.icon}`}></i>
                {item.text}
              </div>
            </a>
          );
        })}
        {/* <div class='footer-menu-item'><a href='/'><i class="ifc-icon ma-home-outline"></i>主页</a></div>
        <div class='footer-menu-item'><a href='/user/tools'><i class="ifc-icon bo-multimedia-music-note"></i>工具</a></div>
        <div class='footer-menu-item footer-menu-topout'><a href='/user/customer'><i class="ifc-icon co-cil-chat-bubble"></i>客服</a></div>
        <div class='footer-menu-item'><a href='/user/member'><i class="ifc-icon ma-crown-outline"></i>会员</a></div>
        <div class='footer-menu-item'><a href='/user/mine'><i class="ifc-icon ma-account-cog-outline"></i>我的</a></div> */}
      </div>
    </div>
  );
};