import * as React from 'react';
import { observer } from 'mobx-react';
import { MouseEventHandler, useRef, useState } from 'react';
import { VerticalAlignTopOutlined } from '@ant-design/icons';
import styles from './index.less';
import classNames from 'classnames';

declare type MenuFooterProps = {
  onCollapse: MouseEventHandler;
  collapsed: boolean;
};

export const MenuFooter = observer(
  ({ collapsed, onCollapse }: MenuFooterProps) => {
    const [visible, setVisible] = useState<boolean>(false);
    const logoRef = useRef(null);

    return (
      <div
        className={styles.btn}
        onClick={() => setVisible(!visible)}
        ref={logoRef}
      >
        <Item onClick={onCollapse} collapsed={collapsed} />
      </div>
    );
  },
);

interface ItemProps {
  onClick: MouseEventHandler;
  collapsed: boolean;
}
const Item = observer(({ collapsed, onClick }: ItemProps) => {
  const classes = classNames({
    [styles['item']]: true,
  });
  return (
    <div className={classes} onClick={onClick}>
      <div className={styles.title}>
        <VerticalAlignTopOutlined rotate={collapsed ? 90 : -90} />{' '}
        {collapsed ? null : `收起菜单`}
      </div>
    </div>
  );
});