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

import { admin as adminApi } from '@devcms/sdk';

import { showSuccess, showError } from '../../../actions/notice';

class GeneralSettings extends React.Component {
  state = {
    settings: null
  };

  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentDidMount() {
    adminApi.settings.list({ group: 'core' })
      .then((settings) => settings.reduce((acc, cur) => {
        acc[cur.name] = cur.value;

        return acc;
      } , {}))
      .then((settings) => this.setState({ settings }))
      .catch((error) => this.props.showError(error));
  }

  handleInputChange({ target }) {
    const value = target.type === 'checkbox' ? target.checked : target.value;

    this.setState({ settings: { [target.name]: value } });
  }

  handleSubmit(e) {
    e.preventDefault();

    const settings = Object.entries(this.state.settings)
      .map(([name, value]) => ({ name: name, value: value, group: 'core'}));

    adminApi.settings.import({ settings: settings })
      .then(() => this.props.showSuccess('Saved!'))
      .catch((err) => this.props.showError(err))
  }

  render() {
    if (!this.state.settings) {
      return null;
    }

    return (
      <form onSubmit={this.handleSubmit}>
        <div className="title title-action">
          <button type="submit" className="btn btn-blue">Save</button>
          <div>
            <h1>Settings</h1>
            <p>Update information about your site</p>
          </div>
        </div>
        <div className="box box-card">
          <div className="box-header">
            <div className="box-title">General settings</div>
            <div className="box-subtitle">Update site name & timezone</div>
          </div>
          <div className="box-content">
            <div className="columns">
              <div className="column-12 column-mobile-6">
                <div className="field field-info">
                  <h3 className="field-info-title">Site name</h3>
                  <p className="field-info-text">Enter name of your site.</p>
                </div>
              </div>
              <div className="column-12 column-mobile-6">
                <div className="field">
                  <label htmlFor="email">Site name</label>
                  <input type="text" name="name" value={this.state.settings.name} id="name" className="input-text" onChange={this.handleInputChange}/>
                </div>
              </div>
            </div>
            <hr/>
            <div className="columns">
              <div className="column-12 column-mobile-6">
                <div className="field field-info">
                  <h3 className="field-info-title">Timezone</h3>
                  <p className="field-info-text">Select timezone used for storing dates.</p>
                </div>
              </div>
              <div className="column-12 column-mobile-6">
                <div className="field">
                  <label htmlFor="timezone">Timezone</label>
                  <select name="timezone" id="timezone" value={this.state.settings.timezone} onChange={this.handleInputChange}>
                    <option value="">-- Select Timezone --</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div className="box-footer">
            <button type="submit" className="btn btn-blue">Save</button>
          </div>
        </div>
      </form>
    );
  }
}

export default connect(
  (state) => ({
    site: state.site
  }),
  { showSuccess, showError }
)(GeneralSettings);
