/*
Site header editor component

@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 {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/mode/markdown/markdown';

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


@observer
export class SiteHeaderEditor extends Component {
  // TODO: Add support for HTML / Markdown
  // TODO: Add support for undo/redo
  constructor(props) {
    super(props);

    this.handleUpdateCode = this.handleUpdateCode.bind(this);
  }

  handleUpdateCode(editor, metadata, newCode) {
    siteStore.header = newCode;
  }

  render() {
    // TODO Add suppport switchable editor themes.


    return (
      <form
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 4fr',
          gridTemplateRows: '1fr 4fr 0.5fr',
          marginTop: '10px',
        }}
      >
        <h2 style={{ gridColumn: 'span 2' }}>Site Header</h2>
        <div
          style={{
            gridColumn: 'span 2',
          }}
        >
          <CodeMirror
            autoFocus={ false }
            autoCursor={ false }
            value={ siteStore.header }
            onChange={ this.handleUpdateCode }
            options={{
              mode: 'markdown',
              theme: 'monokai',
              lineWrapping: true,
              lineNumbers: true,
            }} />
        </div>
      </form>
    );
  }
}
