import * as React from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames/bind';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';

import Edit from 'assets/svg/edit.svg';

import s from './EditMenu.module.scss';

const cn = classNames.bind(s);

interface IMenuList {
  title: string;
  href?: string;
  onClick?: () => void;
}

interface IEditMenuProps {
  title: string;
  color: string;
  iconColor?: string;
  menuList: Array<IMenuList>;
}

class EditMenu extends React.Component<IEditMenuProps> {
  static defaultProps = {
    iconColor: 'white',
  };

  wrapper: HTMLDivElement | null;

  button: HTMLButtonElement | null;

  constructor(props: IEditMenuProps) {
    super(props);

    this.wrapper = null;

    this.button = null;
  }

  state = {
    isEditMenuOpen: false,
  };

  onToggleMenu = () => {
    this.setState({
      isEditMenuOpen: !this.state.isEditMenuOpen,
    });
  };

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event: MouseEvent) => {
    if (this.button && this.button.contains(event.target as Node)) {
      return;
    }

    if (this.wrapper && !this.wrapper.contains(event.target as Node)) {
      this.setState({
        isEditMenuOpen: false,
      });
    }
  };

  render() {
    const { color, iconColor, menuList, title } = this.props;
    const { isEditMenuOpen } = this.state;

    return (
      <div className={s.editMenu}>
        <button
          type="button"
          name={title}
          className={s.editMenu__icon}
          onClick={this.onToggleMenu}
          ref={(el) => (this.button = el)}
        >
          <Edit className={cn(s.editMenu__SVG, `fill-${iconColor}`)} />
        </button>
        <div className={cn(s.editMenu__menu, { isEditMenuOpen })} ref={(el) => (this.wrapper = el)}>
          <div className={s.editMenu__shadow}>
            <div className={s.editMenu__top}>
              {menuList.map(({ title: itemTitle, href, onClick }: IMenuList) => {
                if (onClick) {
                  return (
                    <button
                      type="button"
                      key={itemTitle}
                      className={cn(s.editMenu__link, `color-${color}`)}
                      onClick={onClick}
                    >
                      {itemTitle}
                    </button>
                  );
                }

                return (
                  <LinkWrapper
                    key={itemTitle}
                    className={cn(s.editMenu__link, `color-${color}`)}
                    href={href}
                  >
                    {itemTitle}
                  </LinkWrapper>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default observer(EditMenu);