import * as React from "react";
import {
  withKnobs,
  text,
  object,
  boolean,
  select,
} from "@storybook/addon-knobs";

import { Editor, EditorContext } from "./Editor";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";

import {
  EditorObject,
  LoadComponent,
  RichEditor,
  ItemLegend,
  ComponentSelector,
} from "./components";
import { EditorActions, CURSOR_ID } from "./types";
import { EditorObjectState } from "./components/EditorObject/types";
import { AddTypes } from "./components/EditorObject/EditorObject";

export default {
  title: "Modules|Editor",
  component: Editor,
  subcomponents: {
    EditorObject,
    LoadComponent,
    RichEditor,
    ItemLegend,
    ComponentSelector,
  },
  parameters: {
    componentSubtitle: "This is the editor module",
  },
  excludeStories: /.*Data$/,
  decorators: [withKnobs],
};

export const sampleContentData = [
  {
    id: "body",
    type: ComponentTypes.BODY,
    parent: false,
    style: {
      // backgroundColor: `rgb(255,255,0,0.3)`,
      padding: 30,
    },
    canHaveChildren: true,
  },
  {
    id: "testing1",
    type: ComponentTypes.HEADLINE,
    style: { color: "green", fontSize: "18pt" },
    children: "1 [HEADLINE] - This is a test",
    parent: "body",
  },
  {
    id: "container",
    type: ComponentTypes.CONTAINER,
    parent: "body",
    style: { backgroundColor: "#f1f1f1", padding: 20 },
    canHaveChildren: true,
  },
  {
    id: "testing2",
    type: ComponentTypes.TEXT,
    style: { fontSize: "12pt" },
    children: "2 [TEXT] - This is a test",
    parent: "container",
  },
  {
    id: "testing3",
    type: ComponentTypes.HEADLINE,
    style: { color: "green", fontSize: "18pt" },
    children: "3 [HEADLINE] - This is a test",
    parent: "container",
    state: EditorObjectState.ACTIVE,
  },
  {
    id: "testing4",
    type: ComponentTypes.TEXT,
    style: { fontSize: "12pt" },
    children: "4 [TEXT] - This is a test",
    parent: "container",
  },
  {
    id: "testing5",
    type: ComponentTypes.TEXT,
    style: { fontSize: "12pt" },
    children: "5 [TEXT] - This is a test",
    parent: "body",
  },
  {
    id: "testing6",
    type: ComponentTypes.TEXT,
    style: { fontSize: "12pt" },
    children: "6 [TEXT] - This is a test",
    parent: "body",
  },
];

export const Default = () => {
  const components = Object.keys(ComponentTypes);

  const SampleToolbar = () => {
    const btnStyle = { margin: 5 };
    const editor = React.useContext(EditorContext);
    const { content, dispatch } = editor;
    return (
      <div
        style={{
          // width: "100%",
          padding: 15,
          textAlign: "center",
          background: "#e0e0e0",
          borderTopLeftRadius: 5,
          borderTopRightRadius: 5,
          borderBottom: `1px solid #CCC`,
          // boxShadow: `0 2px 5px 0 rgb(0,0,0,0.25)`,
        }}
      >
        <img
          src="https://medialibdata.s3.amazonaws.com/457/10MinuteFunnels_Logo_RGB.png"
          style={{ float: "left", width: 150 }}
        />

        <button
          style={btnStyle}
          onClick={() => {
            dispatch({
              type: EditorActions.UNDO,
              payload: {},
            });
          }}
        >
          Undo
        </button>
        <button
          style={btnStyle}
          onClick={() => {
            dispatch({
              type: EditorActions.REDO,
              payload: {},
            });
          }}
        >
          Redo
        </button>
        <button
          onClick={() =>
            dispatch({
              type: EditorActions.CHANGE_STATE,
              payload: {
                id: "container",
                state: EditorObjectState.ACTIVE,
              },
            })
          }
        >
          Change State
        </button>
        <button
          style={btnStyle}
          onClick={() => {
            dispatch({ type: EditorActions.CLEAR_ALL_STATES, payload: {} });
          }}
        >
          Clear All States
        </button>

        <button
          style={btnStyle}
          onClick={() => {
            dispatch({
              type: EditorActions.MOVE_THIS_BY_THAT,
              payload: {
                id1: "testing1",
                id2: "testing2",
                // id2: CURSOR_ID,
              },
            });
          }}
        >
          Move This By That
        </button>

        <button
          onClick={() => {
            dispatch({
              type: EditorActions.ADD_HOVER_CURSOR,
              payload: {
                id: "testing5",
                addType: AddTypes.AFTER,
              },
            });
          }}
        >
          Add Hover Cursor
        </button>

        <button
          onClick={() =>
            dispatch({
              type: EditorActions.UPDATE_CONTENT,
              payload: sampleContentData,
            })
          }
        >
          Reset Content
        </button>
      </div>
    );
  };

  return (
    <div>
      <Editor
        name="Editor"
        initialContent={sampleContentData}
        components={components}
        itemLegendIsVisible
        itemLegendSettings={{
          title: "Components",
        }}
      >
        {({ Builder, ItemLegend, dispatch }) => {
          return (
            <div style={{ background: "#EEE", borderRadius: 5 }}>
              <SampleToolbar />
              <div
                style={{
                  display: "flex",
                  alignItems: "stretch",
                }}
                onClick={(e) => {
                  e.stopPropagation();
                  console.log("Testing");
                  dispatch({
                    type: EditorActions.CLEAR_ALL_STATES,
                    payload: {},
                  });
                }}
              >
                <div
                  style={
                    {
                      // borderRight: `2px solid #CCC`,
                      // background: "white",
                    }
                  }
                >
                  <ItemLegend />
                </div>
                <div
                  style={{
                    borderRadius: 3,
                    margin: "20px auto",
                    background: "white",
                    boxShadow: `rgba(46, 61, 73, 0.2) 5px 5px 25px 0px`,
                    width: "70%",
                  }}
                >
                  <Builder />
                </div>
              </div>
            </div>
          );
        }}
      </Editor>
    </div>
  );
};

export const JustTheEditor = () => {
  const components = Object.keys(ComponentTypes);
  return (
    <Editor
      name="Editor"
      initialContent={sampleContentData}
      components={components}
    />
  );
};

Default.story = {
  parameters: {
    jest: ["Editor"],
  },
};