import {FC} from 'react';
import {Menu as AntdMenu, Layout} from 'antd';
import {useCollapsedMenu, useMenu, useMenuState} from './hooks';
import css from './index.module.css';
import {MenuUnfoldOne} from '@icon-park/react';
import classNames from 'classnames';
import Lottie from 'lottie-react';
import lottieData from '@assets/json/wave.json';

const Menu: FC = function () {
  const menus = useMenu();
  const [{openKeys, selectKey}, {onOpenChange, onClick}] = useMenuState();
  const [collapsed, toggle] = useCollapsedMenu();

  return (
    <Layout.Sider width={240} className={css.slider} collapsed={collapsed}>
      <div
        className={classNames(css.sliderBtn, {
          [css.sliderBtnCollapsed]: collapsed,
        })}
      >
        <MenuUnfoldOne
          theme='outline'
          fill='#BDBBBB'
          className={classNames(css.sliderBtnIcon, 'ant-menu-item-icon', {
            [css.sliderBtnIconCollapsed]: collapsed,
          })}
          onClick={toggle}
        />
      </div>

      <AntdMenu
        data-testid='menu'
        mode='inline'
        items={menus}
        selectedKeys={selectKey}
        onOpenChange={onOpenChange}
        openKeys={openKeys}
        className={css.sliderMenus}
        onClick={onClick}
      />

      <Lottie animationData={lottieData} className={css.lottie} />
    </Layout.Sider>
  );
};

export default Menu;
