// Copyright 2012 Google Inc. 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.

package com.google.collide.client.ui.button;

import com.google.collide.client.ui.dropdown.DropdownWidgets.Resources;
import com.google.collide.client.util.CssUtils;
import com.google.collide.client.util.Elements;
import com.google.collide.shared.util.StringUtils;
import com.google.gwt.resources.client.ImageResource;

import elemental.css.CSSStyleDeclaration;
import elemental.events.Event;
import elemental.events.EventListener;
import elemental.html.ButtonElement;

/**
 * A button which centers an image inside of a button. This class is special since it uses multiple
 * background images to achieve the desired effect. NOTE: Would be significantly better if we just
 * used a less-style CSS parser for GWT. It is important that you call
 * {@link #initializeAfterAttachedToDom()} after creation.
 */
public class ImageButton2 {
  private final ButtonElement buttonElement;
  private final String ourTopLayer;

  public ImageButton2(Resources res, ImageResource img) {
    this(Elements.createButtonElement(res.baseCss().button()), img);
  }

  public ImageButton2(ButtonElement buttonElement, ImageResource img) {
    this.ourTopLayer = "url(" + img.getSafeUri().asString() + ") no-repeat 50% 50%";
    this.buttonElement = buttonElement;
    attachEvents();
  }

  private void attachEvents() {
    EventListener listener = new EventListener() {
      @Override
      public void handleEvent(Event evt) {
        refresh();
      }
    };

    // we support over/pressed
    buttonElement.addEventListener(Event.MOUSEDOWN, listener, false);
    buttonElement.addEventListener(Event.MOUSEUP, listener, false);
    buttonElement.addEventListener(Event.MOUSEOVER, listener, false);
    buttonElement.addEventListener(Event.MOUSEOUT, listener, false);
  }

  /**
   * Initializes the button after it's button has been attached to the DOM. This means fully
   * attached to the document body not just appended to a container.
   */
  public void initializeAfterAttachedToDom() {
    refresh();
  }

  /**
   * Refreshes the background image of the image button.
   */
  private void refresh() {
    CSSStyleDeclaration declaration = CssUtils.getComputedStyle(buttonElement);
    if (StringUtils.isNullOrEmpty(declaration.getPropertyValue("background"))) {
      // bail if we're not attached to the dom
      return;
    }

    buttonElement.getStyle().removeProperty("background");
    String currentBackgroundImage = declaration.getPropertyValue("background");
    buttonElement.getStyle().setProperty("background", ourTopLayer + "," + currentBackgroundImage);
  }

  public ButtonElement getButtonElement() {
    return buttonElement;
  }
}