/*
Menu editor for a site.

@copyright (c) Copyright 2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

import {h, Component} from 'preact';  /** @jsx h*/

import {observer} from 'mobx-observer';
import DraggableList from 'react-draggable-list';
import PropTypes from 'prop-types';
import FontAwesome from 'react-fontawesome';

import {siteStore} from '../stores';


class MenuItem extends Component {

  static get propTypes() {
    return {
      item: PropTypes.object({
        url: PropTypes.string,
        title: PropTypes.string,
      }),
      dragHandle: PropTypes.func,
    };
  }

  constructor() {
    super();
    this.handleRemoveItem = this.handleRemoveItem.bind(this);
    this.handleUpdateItemTitle = this.handleUpdateItemTitle.bind(this);
    this.handleUpdateItemUrl = this.handleUpdateItemUrl.bind(this);
    this.getPositionInList = this.getPositionInList.bind(this);
  }

  getPositionInList() {
    const { title, url } = this.props.item;
    return siteStore.menu.findIndex((item) => {
      return item.url === url && item.title === title
    });
  }

  handleRemoveItem() {
    siteStore.menu.splice(this.getPositionInList(), 1);
  }

  handleUpdateItemTitle(event) {
    const title = event.target.value;
    siteStore.menu[this.getPositionInList()].title = title;
  }

  handleUpdateItemUrl(event) {
    const url = event.target.value;
    siteStore.menu[this.getPositionInList()].url = url;
  }

  render() {
    const { title, url } = this.props.item;
    return (
      <div
        style={{
          padding: '5px',
          backgroundColor: '#333333',
          textAlign: 'center',
          borderRadius: '5px',
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-around',
          alignItems: 'center',
        }}
      >
        {this.props.dragHandle(<FontAwesome name='arrows'/>)}
        <span>
          <label htmlFor='title' style={{ paddingRight: '10px' }}>Title</label>
          <input id='title' type='text' value={ title } onInput={ this.handleUpdateItemTitle }  />
        </span>
        <span>
          <label htmlFor='url' style={{ paddingRight: '10px' }}>URL</label>
          <input id='url' type='text' value={ url } onInput={ this.handleUpdateItemUrl } />
        </span>
        <div onClick={ this.handleRemoveItem }>
          <FontAwesome name='remove' />
        </div>
      </div>
    )
  }
}



@observer export class MenuEditor extends Component {

  constructor() {
    super();
    this.handleReorderMenu = this.handleReorderMenu.bind(this);
  }

  handleAddMenuItem() {
    siteStore.menu.push({'url': '/', title: 'New'})
  }

  handleReorderMenu(newList) {
    siteStore.menu = newList;
  }

  render() {
    const menu = Array.from(siteStore.menu);

    return (
      <div
        id='menu'
        style={{
          marginTop: '10px',
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
        }}
      >
        <h2>Menu</h2>
        <DraggableList
          itemKey='url'
          template={ MenuItem }
          list={ menu }
          onMoveEnd={ this.handleReorderMenu }/>
        <button type='button' onClick={ this.handleAddMenuItem }>
          <FontAwesome name='plus' /> Add Menu Item
        </button>
      </div>
    );
  }
}
