import { styled } from '../Theme';

type NavMenuProps = {
  $bgColor: string;
  $textColor: string;
};

// .navmenu
export const NavMenuStyled = styled('nav', {
  shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
})<NavMenuProps>(({ $textColor, theme }) => ({
  position: 'relative',
  padding: '0 16px',
  minWidth: '50px',
  // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
  flexGrow: 100,
  color: $textColor,
  fontSize: '16px',
  '&.navmenu--inline': {
    backgroundColor: theme.palette.background.paper,
  },
}));

// .navmenu-root
export const NavMenuRoot = styled('ul')(() => ({
  listStyle: 'none',
  margin: 0,
  padding: 0,
  display: 'flex',
  alignItems: 'center',
  // inline 布局
  '&.navmenu-root--inline ': {
    flexDirection: 'column',
    alignItems: 'stretch',
  },
}));

type NavMenuItemProps = {
  $activeTextColor: string;
};
// 菜单项 .navmenu-item
export const NavMenuItem = styled('li', {
  shouldForwardProp: (prop) => prop !== '$activeTextColor',
})<NavMenuItemProps>(({ $activeTextColor, theme }) => ({
  display: 'flex',
  alignItems: 'center',
  position: 'relative',
  padding: '8px 12px',
  whiteSpace: 'nowrap',
  cursor: 'pointer',
  transition: theme.transitions.create('color', {
    duration: theme.transitions.duration.standard,
  }),
  WebkitTapHighlightColor: 'transparent', // 禁用触摸反馈
  // 间距调整
  '&:first-of-type': {
    paddingLeft: 0,
  },
  '&:last-of-type': {
    paddingRight: 0,
  },
  // 内部链接
  a: {
    whiteSpace: 'nowrap',
    color: 'inherit',
    textDecoration: 'none',
    // 扩大点击区域
    '&::before': {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      backgroundColor: 'transparent',
      content: '""',
    },
  },
  // 图标
  '.navmenu-item__icon': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: '4px',
    '& > *': {
      width: '22px',
      height: '22px',
      maxHeight: '22px',
      fontSize: '1.5em',
    },
  },
  // 右侧内容
  '.navmenu-item__content': {
    height: '32px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-start',
    gap: '5px',
  },
  '.navmenu-item__label': {
    display: 'flex',
    alignItems: 'center',
    '&-arrow': {
      marginLeft: '6px',
      fontSize: '14px',
      opacity: 0,
      transition: theme.transitions.create('opacity', {
        duration: theme.transitions.duration.standard,
      }),
    },
  },
  '.navmenu-item__desc': {
    fontSize: '14px',
  },
  // 悬停状态下
  '&:hover': {
    color: $activeTextColor,
  },
  // 选中状态下
  '&.navmenu-item--active': {
    color: $activeTextColor,
  },
  // Panel 形态下
  '&.navmenu-item--panel': {
    padding: '8px 16px',
    borderRadius: '8px',
    '.navmenu-item__icon': {
      flexShrink: 0,
      width: '32px',
      height: '32px',
      marginRight: '16px',
      border: '1px solid',
      borderColor: theme.palette.grey[200],
      borderRadius: '4px',
      color: theme.palette.grey[500],
    },
    '.navmenu-item__label': {
      fontSize: '14px',
      lineHeight: 1,
      color: theme.palette.text.primary,
    },
    '.navmenu-item__desc': {
      fontSize: '12px',
      lineHeight: 1,
      color: theme.palette.text.secondary,
    },
    '&:hover': {
      background: theme.palette.action.hover,
      transition: theme.transitions.create('background', {
        duration: theme.transitions.duration.standard,
      }),
      '.navmenu-item__label-arrow': {
        opacity: 1,
      },
      '.navmenu-item__desc': {
        color: theme.palette.text.primary,
        transition: theme.transitions.create('color', {
          duration: theme.transitions.duration.standard,
        }),
      },
    },
    '&.navmenu-item--active': {
      background: theme.palette.action.hover,
    },
    // Force clear hover state when not actually hovering
    '&:not(:hover).navmenu-item--active': {
      background: 'transparent',
      transition: theme.transitions.create('background', {
        duration: theme.transitions.duration.standard,
      }),
    },
  },
  // inline 布局中
  '&.navmenu-item--inline': {
    margin: 0,
    padding: 0,
    minHeight: '48px',
    lineHeight: '48px',
    flexWrap: 'wrap',
  },
}));

// 包含子菜单的导航项 .navmenu-item .navmenu-sub
export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
  '.navmenu-item': {
    marginLeft: 0,
    overflow: 'hidden',
  },
  '& .navmenu-sub__container': {
    pointerEvents: 'none',
    opacity: 0,
    position: 'absolute',
    top: '100%',
    left: 0,
    zIndex: 1,
  },
  '&.navmenu-sub--opened > .navmenu-sub__container': {
    pointerEvents: 'auto',
    opacity: 1,
    transition: theme.transitions.create('opacity', {
      duration: theme.transitions.duration.standard,
      easing: theme.transitions.easing.easeOut,
    }),
  },
  // 扩展图标
  '.navmenu-sub__expand-icon': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: '8px',
    '& > *': {
      width: '0.8em',
      height: '0.8em',
      transition: theme.transitions.create('transform', {
        duration: theme.transitions.duration.standard,
      }),
    },
    '.navmenu-item--inline &': {
      marginLeft: 'auto',
    },
  },
  // inline 布局
  '&.navmenu-item--inline': {
    '.navmenu-sub__container': {
      position: 'static',
      transform: 'none',
      flex: '1 0 100%',
      padding: 0,
      height: 0,
      overflow: 'hidden',
      transition: theme.transitions.create('height', {
        duration: theme.transitions.duration.standard,
      }),
    },
    '&.navmenu-sub--opened > .navmenu-sub__container': {
      height: 'auto',
    },
    '.navmenu-sub__list': {
      padding: 0,
      paddingLeft: '24px',
      boxShadow: 'none',
    },
    '.navmenu-item__content': {
      height: '48px',
    },
  },
}));

// 下拉子菜单 .navmenu-sub__list
export const NavMenuSubList = styled('ul')(({ theme }) => ({
  margin: 0,
  padding: '16px',
  borderRadius: '4px',
  backgroundColor: theme.palette.background.paper,
  '& .navmenu-item + .navmenu-item': {
    marginTop: '8px',
  },
}));
