///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define([
  "require",
  "dojo",
  "dijit",
  "dojo/_base/declare",
  "dijit/_editor/_Plugin",
  "dijit/form/DropDownButton"
], function (require, dojo, dijit, declare, _Plugin, DropDownButton) {
  //This is a pulg-in of arcgis-js-api/dijit/_editor/.
  //The template file is /arcgis-js-api/dijit/_editor/plugins/TextColor.js.

  // module:
  //		dijit/_editor/plugins/BackgroundColor
  dojo.experimental("dijit.editor.plugins.EditorBackgroundColor");
  var EditorBackgroundColor = declare("dijit.editor.plugins.EditorBackgroundColor", _Plugin, {
    // summary:
    //		This plugin provides dropdown color pickers for setting text color and background color
    // description:
    //		The commands provided by this plugin are:
    //
    //		- foreColor - sets the text color
    //		- hiliteColor - sets the background color

    // Override _Plugin.buttonClass to use DropDownButton (with ColorPalette) to control this plugin
    buttonClass: DropDownButton,

    // colorPicker: String|Constructor
    //		The color picker dijit to use, defaults to dijit/ColorPalette
    colorPicker: "jimu/dijit/ColorPalette",

    // useDefaultCommand: Boolean
    //		False as we do not use the default editor command/click behavior.
    useDefaultCommand: false,

    _initButton: function () {
      this.command = "editorBackgroundColor";//name for plugin//this.name;
      this.hackCommand = "hiliteColor";//commands:https://developer.mozilla.org/en-us/docs/Web/API/Document/execCommand
      this.inherited(arguments);

      var recordUID = "",
        forceAttr = false;
      if (this.params.custom) {
        if(this.params.custom.recordUID){
          recordUID = this.params.custom.recordUID;
        }
      }
      // Setup to lazy load ColorPalette first time the button is clicked
      var self = this;
      //button icon
      this.button.set("iconClass", this.iconClassPrefix + " " + this.iconClassPrefix + "HiliteColor");
      this.button.set("title", this.getLabel(this.hackCommand));
      this.button.loadDropDown = function (callback) {
        function onColorPaletteLoad(ColorPalette) {
          self.button.dropDown = new ColorPalette({
            dir: self.editor.dir,
            ownerDocument: self.editor.ownerDocument,
            value: self.value,
            appearance: {
              showTransparent: true,
              showColorPalette: true,
              showCoustom: true,
              showColorPickerOK: true,
              showColorPickerApply: false,//change color will close DropDown, so can't use apply
              showCoustomRecord: true
            },
            recordUID: recordUID,
            onChange: function (color) {
              //Toggles the use of HTML tags or CSS for the generated markup
              self.editor.execCommand("useCSS", forceAttr);
              self.editor.execCommand("styleWithCSS", !forceAttr);

              self.editor.execCommand(self.hackCommand, color);
            },
            onExecute: function () {
              self.editor.execCommand(self.hackCommand, this.get("value"));
            },
            onClose: function(){
              self.button.closeDropDown();
            }
          });
          callback();
        }

        if (typeof self.colorPicker === "string") {
          require([self.colorPicker], onColorPaletteLoad);
        } else {
          onColorPaletteLoad(self.colorPicker);
        }
      };
    },

    updateState: function () {
      // summary:
      //		Overrides _Plugin.updateState().  This updates the ColorPalette
      //		to show the color of the currently selected text.
      // tags:
      //		protected
      var _e = this.editor;
      var _c = this.hackCommand;
      if (!_e || !_e.isLoaded || !_c.length) {
        return;
      }

      var value;
      if (this.button) {
        var disabled = this.get("disabled");
        this.button.set("disabled", disabled);
        if (disabled) {
          return;
        }

        try {
          value = _e.queryCommandValue(_c) || "";
        } catch (e) {
          //Firefox may throw error above if the editor is just loaded, ignore it
          value = "";
        }
      }

      if (value === "") {
        value = "#000000";
      } else if (value === "transparent") {
        value = "rgba(0, 0, 0, 0)";
      }
      this.value = value;

      var dropDown = this.button.dropDown;
      if (dropDown && dropDown.getColor && value !== dropDown.getColor()) {
        dropDown.refreshRecords();
        dropDown.setColor(value);
      }
    }
  });

  dojo.subscribe(dijit._scopeName + ".Editor.getPlugin", null, function (o) {
    if (o.plugin) {
      return;
    }
    switch (o.args.name) {
      case "editorBackgroundColor":
        o.plugin = new EditorBackgroundColor();
    }
  });
  return EditorBackgroundColor;
});