import React, { useState } from 'react';
import classNames from 'classnames/bind';
import styles from './ListMenu.scss';
import { ReactComponent as IconMore } from '@assets/img/svg/ico_more_gray.svg';

const cx = classNames.bind(styles);

interface IMenu {
  title: string;
  onClick: () => void;
  isDisabled: boolean;
}

interface IOwnProps {
  alignLeft?: boolean;
  list: IMenu[];
};

const ListMenu: React.FC<IOwnProps> = ({ alignLeft, list }) => {
  const [showMenu, setShowMenu] = useState<boolean>(false);
  const handleClick = (onClick: () => void) => {
    onClick();
    setShowMenu(false);
  };

  return (
    <div className={cx('list_menu')}>
      <button className={cx('btn_more')} onClick={() => setShowMenu(!showMenu)}>
        <span className={cx('blind')}>more</span>
        <IconMore className={cx('ico_more')} />
      </button>
      {showMenu && (
        <div className={cx('ly_menu', alignLeft && 'left')}>
          <ul className={cx('menu_list')}>
            {list.map(item => (
              <li className={cx('menu_item')} key={item.title}>
                <button type="button" className={cx('btn_menu')} aria-disabled={item.isDisabled} onClick={() => handleClick(item.onClick)}>{item.title}</button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default ListMenu;
