import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';

import {close, setSkinFromFilename, openFileDialog} from '../actionCreators';

import {CLOSE_CONTEXT_MENU, TOGGLE_CONTEXT_MENU} from '../actionTypes';

import '../../css/context-menu.css';

const SKINS = [
  {file: 'base-2.91.wsz', name: '<Base Skin>'},
  {file: 'MacOSXAqua1-5.wsz', name: 'Mac OSX v1.5 (Aqua)'},
  {file: 'TopazAmp1-2.wsz', name: 'TopazAmp'},
  {file: 'Vizor1-01.wsz', name: 'Vizor'},
  {file: 'XMMS-Turquoise.wsz', name: 'XMMS Turquoise '},
  {file: 'ZaxonRemake1-0.wsz', name: 'Zaxon Remake'}
];

class ContextMenu extends React.Component {
  componantWillMount() {
    // Clicking anywhere outside the context menu will close the window
    document.addEventListener('click', this.props.closeMenu);
  }

  componantWillUnmount() {
    document.removeEventListener('click', this.props.closeMenu);
  }

  render() {
    return <div id='option' className={classnames({selected: this.props.selected})} onClick={this.props.toggleMenu}>
      <ul id='context-menu'>
        <li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>
        <li className='hr'><hr /></li>
        <li id='context-play-file' onClick={this.props.openFileDialog}>Play File...</li>
        <li className='parent'>
          <ul>
            <li id='context-load-skin' onClick={this.props.openFileDialog}>Load Skin...</li>
            <li className='hr'><hr /></li>
            {SKINS.map((skin) => (
              <li
                key={skin.file}
                onClick={this.props.setSkin.bind(null, skin.file)}
              >
                {skin.name}
              </li>
            ))}
          </ul>
          Skins
        </li>
        <li className='hr'><hr /></li>
        <li id='context-exit' onClick={this.props.close}>Exit</li>
      </ul>
    </div>;
  }
}

const mapStateToProps = (state) => state.contextMenu;
const mapDispatchToProps = (dispatch, ownProps) => ({
  close: () => dispatch(close()),
  closeMenu: () => dispatch({type: CLOSE_CONTEXT_MENU}),
  toggleMenu: (e) => {
    dispatch({type: TOGGLE_CONTEXT_MENU});
    e.stopPropagation();
  },
  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
  setSkin: (filename) => dispatch(setSkinFromFilename(filename))
});

export default connect(mapStateToProps, mapDispatchToProps)(ContextMenu);