/**
 * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

import Button from "react-bootstrap/lib/Button";
import ControlLabel from "react-bootstrap/lib/ControlLabel";
import Form from "react-bootstrap/lib/Form";
import FormControl from "react-bootstrap/lib/FormControl";
import FormGroup from "react-bootstrap/lib/FormGroup";
import Modal from "react-bootstrap/lib/Modal";
import React from "react";
import {connect} from "react-redux";

import {
  DEFAULT_LAYOUT, LAYOUT_CHOICES, SETTINGS_KEY_LAYOUT
} from "../lib/defs";
import {setLayout} from "../actions/settings";

class SettingsModalView extends React.PureComponent {
  constructor (props) {
    super(props);
    this.onSaveButtonClick = this.onSaveButtonClick.bind(this);
    this.onSelectLayoutChange = this.onSelectLayoutChange.bind(this);

    this.state = {
      layout: this.props.settings.layout
    };
  }
  componentWillReceiveProps (nextProps) {
    if (!this.props.show && nextProps.show) {
      this.setState({layout: this.props.settings.layout});
    }
  }
  onSaveButtonClick (e) {
    e.stopPropagation();
    e.preventDefault();

    this.props.dispatch(setLayout(this.state.layout));

    this.props.onHide();
  }
  onSelectLayoutChange (e) {
    this.setState({layout: e.target.value});
  }
  render () {
    return (
      <Modal show={this.props.show} onHide={this.props.onHide}>
        <Modal.Header closeButton>
          <Modal.Title>Settings</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <Form>
            <FormGroup controlId="settingsLayout">
              <ControlLabel>Layout</ControlLabel>
              <FormControl
                componentClass="select"
                placeholder="-- select --"
                value={this.state.layout}
                onChange={this.onSelectLayoutChange}>
                {LAYOUT_CHOICES.map(function (item, index) {
                  return (
                    <option key={index} value={item[0]}>{item[1]}</option>
                  );
                })}
              </FormControl>
            </FormGroup>
          </Form>
        </Modal.Body>

        <Modal.Footer>
          <Button onClick={this.props.onHide}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.onSaveButtonClick}>Save</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

SettingsModalView.PropTypes = {
  settings: React.PropTypes.object.isRequired,
  show: React.PropTypes.bool.isRequired,
  onHide: React.PropTypes.func.isRequired
};

const mapStateToProps = (state, props) => {
  return {
    settings: state.settings,
    show: props.show,
    onHide: props.onHide
  };
};

const reduxContainer = connect(mapStateToProps)(SettingsModalView);

export default reduxContainer;