/*
 * This file is part of ORY Editor.
 *
 * ORY Editor is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * ORY Editor is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with ORY Editor.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @license LGPL-3.0
 * @copyright 2016-2018 Aeneas Rekkas
 * @author Aeneas Rekkas <aeneas+oss@aeneas.io>
 *
 */

import Subject from '@material-ui/icons/Subject';
import { compose, flatten, map, prop } from 'ramda';
import Html from 'slate-html-serializer';
import * as React from 'react';
import Component from './Component';
import Plugin from './plugins/Plugin';
import * as hooks from './hooks';
import parse5 from 'parse5';
import v002 from './migrations/v002';
import { Value } from 'slate';
import { PluginButtonProps } from './plugins/Plugin';
import { ContentPluginConfig } from 'ory-editor-core/lib/service/plugin/classes';
import { SlateState } from './types/state';
import { SlateProps } from './types/component';
import { SlateSettings } from './types/settings';
import { pathOr } from 'ramda/src/pathOr';
import { ActionTypes } from 'redux-undo';
import { AnyAction } from 'redux';

//adding icon
import Paragraph from '../../../../../examples/public/images/paragraph.png'
import { render } from 'react-dom';

const createPlugins = compose(
  flatten,
  map(prop('plugins'))
);

export const createInitialState = hooks.createInitialState;

export const html = new Html({
  rules: [...hooks.defaultPlugins, hooks.lineBreakSerializer],
  parseHtml: parse5.parseFragment,
});

export const defaultPlugins = hooks.defaultPlugins;
const renderHeading = plugin => {
  let groupName = null;
  switch(plugin.name) {
    case 'fontSize':
      groupName = 'Font';
      break;
    case 'headings':
      groupName = 'Heading';
      break;
    case 'alignment':
      groupName = 'Alignment';
      break;
    case 'lists' : 
      groupName = 'Bullets';
      break;
    default : 
      groupName = null
      break
  }
  return (
    groupName && <label htmlFor="" className='grouping-label' >
      {groupName}  
    </label>
  )
}
export default (
  plugins: Plugin[] = hooks.defaultPlugins
): ContentPluginConfig<SlateState> => {
  let settings: SlateSettings = {};
  settings.plugins = (plugins ? plugins : []).concat(createPlugins(plugins));

  // const HoverButtons = ({
  //   editorState,
  //   editor,
  // }: PluginButtonProps) => (
  //   <div style={{display: 'flex', flexWrap: 'wrap', width: 'max-content',
  //   // border: "solid 1px #dbdbdb",
  //   // backgroundColor: "#fafafa",
  //   //  borderRadius: '8px',
  //    color:'blue'
  //   }} >

  //     {plugins &&
  //       plugins.map(
  //         (plugin: Plugin, i: number) =>
  //           plugin.hoverButtons &&
  //           plugin.hoverButtons.map((Button, j: number) => (
  //             <Button
  //               key={`${i}-${j}`}
  //               editorState={editorState}
  //               editor={editor}
  //             />
  //           ))
  //       )}
  //   </div>
  // );

  // settings.HoverButtons = HoverButtons;
  
  
  
  const ToolbarButtons = ({
    editorState,
    editor,
  }: PluginButtonProps) => (
    <>
      {plugins &&
        plugins.map(
          (plugin: Plugin, i: number) =>
            <>
              {renderHeading(plugin)}
              {plugin.toolbarButtons &&
                <div className="toolbar-button">
                  {plugin.toolbarButtons.map((Button, j: number) => (
                    <Button
                      key={`${i}-${j}`}
                      editorState={editorState}
                      editor={editor}
                    />
                  ))}
                </div>
              }
              {plugin.hoverButtons &&
                <div className="hover-button">
                  {plugin.hoverButtons.map((Button, j: number) => (
                    <Button
                      key={`${i}-${j}`}
                      editorState={editorState}
                      editor={editor}
                    />
                  ))}
                </div>
              }
            </>
        )}
    </>
  );
  settings.ToolbarButtons = ToolbarButtons;
  const Slate: React.SFC<SlateProps> = cellProps => (
    <Component {...cellProps} {...settings} />
  );
  const StaticComponent = ({
    state: { editorState = {} as Value } = {},
  }: SlateProps) => (
    <div
      className="ory-plugins-content-slate-container"
      dangerouslySetInnerHTML={{ __html: html.serialize(editorState) }}
    />
  );
  return {
    Component: Slate,
    StaticComponent,

    name: 'ory/editor/core/content/slate',
    version: '0.0.2',
    // IconComponent: <Subject />,
    IconComponent: <img src={Paragraph} alt='text' />,
    text: 'Paragraph  Content',
    description: '',
    // description: 'An advanced rich text area.',


    allowInlineNeighbours: true,

    /*handleFocus: (_props: SlateProps, source: string) => {
      if (source === 'onMouseDown') {
        return;
      } else if (_props.state.editorState.selection.isFocused) {
        return;
      }

      setTimeout(() => {
        _props.state.editor && _props.state.editor.focus();
      }, 0);
    },

    handleBlur: (_props: SlateProps) => {
      if (!_props.state.editorState.selection.isFocused) {
        return;
      }
      _props.onChange({
        editorState: _props.state.editor && _props.state.editor.blur().value,
      });
    },*/

    // tslint:disable-next-line:no-any
    reducer: (state: any, action: AnyAction) => {
      if (
        (action.type === ActionTypes.UNDO ||
          action.type === ActionTypes.REDO) &&
        pathOr(false, ['content', 'state', 'editorState'], state)
      ) {
        return {
          ...state,
          content: {
            ...state.content,
            state: {
              ...state.content.state,
              editorState: state.content.state.editorState.merge({
                isNative: false,
              }),
            },
          },
        };
      }
      return state;
    },

    handleRemoveHotKey: hooks.handleRemoveHotKey,
    handleFocusPreviousHotKey: hooks.handleFocusPreviousHotKey,
    handleFocusNextHotKey: hooks.handleFocusNextHotKey,

    createInitialState: hooks.createInitialState,
    serialize: hooks.serialize,
    unserialize: hooks.unserialize,

    // TODO this is disabled because of #207
    // merge = hooks.merge
    // split = hooks.split

    migrations: [v002],
  };
};