import * as ACTION_DATA from "../../actions/data_actions";
import * as ACTION_EDIT from "../../actions/edit_actions";
import * as ACTION_FORMAT from "../../actions/format_actions";
import { ToolBarRegistry } from "../../registries/toolbar_menu_registry";
import { _t } from "../../translation";
import { ActionButton } from "../action_button/action_button";
import { BorderEditorWidget } from "../border_editor/border_editor_widget";
import { PaintFormatButton } from "../paint_format_button/paint_format_button";
import { TableDropdownButton } from "../tables/table_dropdown_button/table_dropdown_button";
import { TopBarColorEditor } from "./color_editor/color_editor";
import { DropdownAction } from "./dropdown_action/dropdown_action";
import { TopBarFontSizeEditor } from "./font_size_editor/font_size_editor";
import { NumberFormatsTool } from "./number_formats_tool/number_formats_tool";
import { ToolBarZoom } from "./zoom_editor/zoom_editor";

export const topBarToolBarRegistry = new ToolBarRegistry();

topBarToolBarRegistry
  .add("edit")
  .addChild("edit", {
    name: "undo",
    component: ActionButton,
    props: {
      action: ACTION_EDIT.undo,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 1,
  })
  .addChild("edit", {
    name: "redo",
    component: ActionButton,
    props: {
      action: ACTION_EDIT.redo,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 2,
  })
  .addChild("edit", {
    name: "paintFormat",
    component: PaintFormatButton,
    props: {
      class: "o-hoverable-button o-toolbar-button o-mobile-disabled",
    },
    sequence: 3,
  })
  .addChild("edit", {
    name: "clearFormat",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.clearFormat,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 4,
  })
  .addChild("edit", {
    name: "zoom",
    component: ToolBarZoom,
    props: {
      class: "o-menu-item-button o-hoverable-button o-toolbar-button",
    },
    sequence: 5,
  })

  .add("numberFormat")
  .addChild("numberFormat", {
    name: "formatPercent",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.formatPercent,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 1,
  })
  .addChild("numberFormat", {
    name: "decreaseDecimalPlaces",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.decreaseDecimalPlaces,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 2,
  })
  .addChild("numberFormat", {
    name: "increaseDecimalPlaces",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.increaseDecimalPlaces,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 3,
  })
  .addChild("numberFormat", {
    name: "numberFormatsTool",
    component: NumberFormatsTool,
    props: {
      class: "o-menu-item-button o-hoverable-button o-toolbar-button",
    },
    sequence: 4,
  })
  .add("fontSize")
  .addChild("fontSize", {
    name: "fontSizeEditor",
    component: TopBarFontSizeEditor,
    props: {
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 3,
  })
  .add("textStyle")
  .addChild("textStyle", {
    name: "bold",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.formatBold,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 1,
  })
  .addChild("textStyle", {
    name: "italic",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.formatItalic,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 2,
  })
  .addChild("textStyle", {
    name: "strikethrough",
    component: ActionButton,
    props: {
      action: ACTION_FORMAT.formatStrikethrough,
      class: "o-hoverable-button o-toolbar-button",
    },
    sequence: 3,
  })
  .addChild("textStyle", {
    name: "textColor",
    component: TopBarColorEditor,
    props: {
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
      style: "textColor",
      icon: "o-spreadsheet-Icon.TEXT_COLOR",
      title: _t("Text Color"),
    },
    sequence: 4,
  })
  .add("cellStyle")
  .addChild("cellStyle", {
    name: "fillColor",
    component: TopBarColorEditor,
    props: {
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
      style: "fillColor",
      icon: "o-spreadsheet-Icon.FILL_COLOR",
      title: _t("Fill Color"),
    },
    sequence: 1,
  })
  .addChild("cellStyle", {
    name: "borderEditor",
    component: BorderEditorWidget,
    props: {
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
    },
    sequence: 2,
  })
  .addChild("cellStyle", {
    name: "mergeCells",
    component: ActionButton,
    props: {
      action: ACTION_EDIT.mergeCells,
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
    },
    sequence: 3,
  })
  .add("alignment")
  .addChild("alignment", {
    name: "alignmentHorizontal",
    component: DropdownAction,
    props: {
      parentAction: ACTION_FORMAT.formatAlignmentHorizontal,
      childActions: [
        ACTION_FORMAT.formatAlignmentLeft,
        ACTION_FORMAT.formatAlignmentCenter,
        ACTION_FORMAT.formatAlignmentRight,
      ],
      class: "o-hoverable-button o-toolbar-button",
      childClass: "o-hoverable-button",
    },
    sequence: 1,
  })
  .addChild("alignment", {
    name: "alignmentVertical",
    component: DropdownAction,
    props: {
      parentAction: ACTION_FORMAT.formatAlignmentVertical,
      childActions: [
        ACTION_FORMAT.formatAlignmentTop,
        ACTION_FORMAT.formatAlignmentMiddle,
        ACTION_FORMAT.formatAlignmentBottom,
      ],
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
      childClass: "o-hoverable-button",
    },
    sequence: 2,
  })
  .addChild("alignment", {
    name: "formatWrapping",
    component: DropdownAction,
    props: {
      parentAction: ACTION_FORMAT.formatWrapping,
      childActions: [
        ACTION_FORMAT.formatWrappingOverflow,
        ACTION_FORMAT.formatWrappingWrap,
        ACTION_FORMAT.formatWrappingClip,
      ],
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
      childClass: "o-hoverable-button",
    },
    sequence: 3,
  })
  .addChild("alignment", {
    name: "formatRotation",
    component: DropdownAction,
    props: {
      parentAction: ACTION_FORMAT.formatRotation,
      childActions: [
        ACTION_FORMAT.formatNoRotation,
        ACTION_FORMAT.formatRotation45,
        ACTION_FORMAT.formatRotation90,
        ACTION_FORMAT.formatRotation270,
        ACTION_FORMAT.formatRotation315,
      ],
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
      childClass: "o-hoverable-button",
    },
    sequence: 4,
  })
  .add("misc")
  .addChild("misc", {
    name: "tableDropdown",
    component: TableDropdownButton,
    props: { class: "o-toolbar-button o-hoverable-button o-menu-item-button o-mobile-disabled" },
    sequence: 1,
  })
  .addChild("misc", {
    name: "createRemoveFilterTool",
    component: ActionButton,
    props: {
      action: ACTION_DATA.createRemoveFilterTool,
      class: "o-hoverable-button o-menu-item-button o-toolbar-button",
    },
    sequence: 2,
  });