import * as React from 'react';

import { observer } from 'mobx-react';
import { ToolBox, PaneContent } from '../editor_styles';
import { EditorContext } from '../editor_context';
import { OutlineFolder } from './outline_folder';
import { Input } from 'semantic-ui-react';
import { css, Theme } from '../../common';

const styledOutline = (theme: Theme) => css`
  .outlineOn {
    background-color: ${theme.dragBackground};
    border: 2px dashed ${theme.dragBorder};
  }

  .item {
    margin-top: 2px;
    margin-bottom: 2px;
  }
`;

const searchInput = css`
  position: absolute !important;
  left: 90px;
  right: 12px;
  top: 6px;
  bottom: 6px;
`;

export const OutlineView = observer(() => {
  const state = React.useContext(EditorContext);
  const [filter, setFilter] = React.useState('');

  return (
    <PaneContent>
      <div className="paneHeader">
        <div className="text">Outline</div>
        <Input
          icon="search"
          placeholder="Search ..."
          className={searchInput}
          fluid
          size="mini"
          onChange={e => setFilter(e.currentTarget.value)}
        />
      </div>
      <ToolBox className={styledOutline(state.theme)}>
        {state.form && (
          <OutlineFolder item={state.project.state.selectedForm} filter={filter} expanded={true} />
        )}
      </ToolBox>
    </PaneContent>
  );
});

OutlineView.displayName = 'FormElements';