// @flow
import * as React from 'react';
import styled from 'styled-components';
import { Block, Change, Node, Mark, Text } from 'slate';
import RichMarkdownEditor, { Placeholder, schema } from 'rich-markdown-editor';
import ClickablePadding from 'components/ClickablePadding';

type Props = {
  titlePlaceholder?: string,
  bodyPlaceholder?: string,
  defaultValue?: string,
  readOnly: boolean,
};

// add rules to the schema to ensure the first node is a heading
schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
schema.document.normalize = (
  change: Change,
  reason: string,
  {
    node,
    child,
    mark,
    index,
  }: { node: Node, mark?: Mark, child: Node, index: number }
) => {
  switch (reason) {
    case 'child_type_invalid': {
      return change.setNodeByKey(
        child.key,
        index === 0 ? 'heading1' : 'paragraph'
      );
    }
    case 'child_required': {
      const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
      return change.insertNodeByKey(node.key, index, block);
    }
    default:
  }
};

class Editor extends React.Component<Props> {
  editor: *;

  componentDidMount() {
    if (!this.props.defaultValue) {
      this.focusAtStart();
    }
  }

  setEditorRef = (ref: RichMarkdownEditor) => {
    this.editor = ref;
  };

  focusAtStart = () => {
    if (this.editor) this.editor.focusAtStart();
  };

  focusAtEnd = () => {
    if (this.editor) this.editor.focusAtEnd();
  };

  renderPlaceholder = (props: *) => {
    const { editor, node } = props;

    if (editor.state.isComposing) return;
    if (node.object !== 'block') return;
    if (!Text.isTextList(node.nodes)) return;
    if (node.text !== '') return;

    const index = editor.value.document.getBlocks().indexOf(node);
    if (index > 1) return;

    const text =
      index === 0 ? this.props.titlePlaceholder : this.props.bodyPlaceholder;

    return <Placeholder>{editor.props.readOnly ? '' : text}</Placeholder>;
  };

  render() {
    const { readOnly } = this.props;

    return (
      <React.Fragment>
        <StyledEditor
          ref={this.setEditorRef}
          renderPlaceholder={this.renderPlaceholder}
          schema={schema}
          {...this.props}
        />
        <ClickablePadding
          onClick={!readOnly ? this.focusAtEnd : undefined}
          grow
        />
      </React.Fragment>
    );
  }
}

// additional styles account for placeholder nodes not always re-rendering
const StyledEditor = styled(RichMarkdownEditor)`
  display: flex;
  flex: 0;

  ${Placeholder} {
    visibility: hidden;
  }

  h1:first-of-type {
    ${Placeholder} {
      visibility: visible;
    }
  }

  p:nth-child(2):last-child {
    ${Placeholder} {
      visibility: visible;
    }
  }
`;

export default Editor;