import { Component } from 'react';
import Plainbudget from 'plainbudget';

import Textarea from '../components/textarea';
import Button from '../components/button';

export default class Index extends Component {
  static getInitialProps (ctx) {
    return { isMobile: ctx.isMobile };
  }

  constructor (props) {
    super(props);

    this.compute = this.compute.bind(this);

    this.onTextareaKeyDown = this.onTextareaKeyDown.bind(this);
    this.onTextareaChange = this.onTextareaChange.bind(this);
    this.onComputeClick = this.onComputeClick.bind(this);
  }

  state = {
    value: ''
  }

  compute () {
    const { value } = this.state;
    const calculated = Plainbudget.computeSheet(value);

    return this.setState({
      value: calculated
    });
  }

  onTextareaKeyDown (event) {
    if ((event.metaKey || event.ctrlKey) && event.keyCode === 13) {
      this.compute();
    }
  }

  onTextareaChange (value) {
    return this.setState({ value });
  }

  onComputeClick (event) {
    event.preventDefault();

    this.compute();
  }

  render () {
    const { isMobile } = this.props;
    const { value } = this.state;

    return (
      <div className="container">
        <Textarea value={ value }
          onKeyDown={ this.onTextareaKeyDown }
          onChange={ this.onTextareaChange } />
        {
          isMobile && (
            <Button onClick={ this.onComputeClick }>
              Compute
            </Button>
          )
        }

        <style jsx global>{`
          .container {
            display: flex;
            flex: 1;
            flex-direction: column;
            height: 100vh;
          }

          textarea,
          button {
            outline: none;
          }

          textarea {
            background: #f6f6f6;
            border: none;
            flex: 1;
            font-family: Fira Mono, monospace;
            font-size: 17px;
            margin: 0;
            padding: 20px;
            padding-left: 100px;
            resize: none;
          }

          button {
            font-size: 16px;
            height: 45px;
            margin: 12px;
            text-transform: uppercase;
            transition: background .2s;
          }

          button:hover {
            background: #2E7D32;
          }

          @media (max-width: 680px) {
            textarea {
              padding-left: 40px;
            }
          }
        `}</style>
      </div>
    );
  }
}