import {
  IconBlockquote,
  IconBold,
  IconHorizontalRule,
  IconImage,
  IconItalic,
  IconLink,
  IconListBullet,
  IconListNumber,
  IconPaperclip,
  IconStrikethrough,
  IconText,
  IconTextMini,
  IconUnderline,
  Toolbar
} from "@heydovetail/ui-components";
import * as React from "react";
import { UxCommand } from "../../constants";
import { PluginState } from "../ToolbarPlugin";

export const ToolbarStalker: React.SFC<{
  onUxCommand: (uxCommand: UxCommand) => void;
  pluginState: PluginState;
}> = props => {

  return (
    <div style={{ position: "absolute", right: "calc(100% + 32px)" }}>
      <Toolbar
        default="default"
        root={{
          name: "default",
          items: [
            {
              icon: <IconText />,
              label: "Formatting",
              nested: {
                name: "formatting",
                items: [
                  {
                    active: props.pluginState.active.h1,
                    icon: <IconText />,
                    label: "Heading 1",
                    onClick: () => props.onUxCommand(UxCommand.ToggleHeading1)
                  },
                  {
                    active: props.pluginState.active.h2,
                    icon: <IconTextMini />,
                    label: "Heading 2",
                    onClick: () => props.onUxCommand(UxCommand.ToggleHeading2)
                  },
                  {
                    active: props.pluginState.active.b,
                    icon: <IconBold />,
                    label: "Bold",
                    onClick: () => props.onUxCommand(UxCommand.Bold)
                  },
                  {
                    active: props.pluginState.active.i,
                    icon: <IconItalic />,
                    label: "Italic",
                    onClick: () => props.onUxCommand(UxCommand.Italic)
                  },
                  {
                    active: props.pluginState.active.u,
                    icon: <IconUnderline />,
                    label: "Underline",
                    onClick: () => props.onUxCommand(UxCommand.Underline)
                  },
                  {
                    active: props.pluginState.active.s,
                    icon: <IconStrikethrough />,
                    label: "Strikethrough",
                    onClick: () => props.onUxCommand(UxCommand.Strikethrough)
                  },
                  {
                    active: props.pluginState.active.bq,
                    icon: <IconBlockquote />,
                    label: "Blockquote",
                    onClick: () => props.onUxCommand(UxCommand.ToggleBlockquote)
                  },
                  {
                    active: props.pluginState.active.ul,
                    icon: <IconListBullet />,
                    label: "Bullet list",
                    onClick: () => props.onUxCommand(UxCommand.ToggleUnorderedList)
                  },
                  {
                    active: props.pluginState.active.ol,
                    icon: <IconListNumber />,
                    label: "Numbered list",
                    onClick: () => props.onUxCommand(UxCommand.ToggleOrderedList)
                  }
                ]
              }
            },
            {
              icon: <IconImage />,
              label: "Image",
              onClick: () => props.onUxCommand(UxCommand.PickAttachmentImage)
            },
            {
              icon: <IconPaperclip />,
              label: "File",
              onClick: () => props.onUxCommand(UxCommand.PickAttachmentFile)
            },
            {
              icon: <IconLink />,
              label: "Link",
              onClick: () => props.onUxCommand(UxCommand.ComposeLink)
            },
            {
              icon: <IconHorizontalRule />,
              label: "Horizontal rule",
              onClick: () => props.onUxCommand(UxCommand.InsertHorizontalRule)
            }
          ]
        }}
      />
    </div>
  );
};