import { get, set, computed } from '@ember/object';
import { later } from '@ember/runloop';
import Component from '@ember/component';
import { isSafari } from 'ui/utils/platform';
import layout from './template';

const DELAY        = 1000;
const DEFAULT_TEXT = 'copyToClipboard.tooltip';

export default Component.extend({
  layout,
  tagName          : 'span',

  model            : null,

  /*Component Params*/
  buttonText       : null,
  tooltipText      : null,
  status           : null,
  color            : 'bg-transparent',
  icon             : 'icon-copy',
  size             : null,
  target           : null,
  clipboardText    : null,
  textChangedEvent : null,

  init() {
    this._super(...arguments);
    // otherwise the tooltip doesn't show up on the first hover
    set(this,'model', {tooltipText: DEFAULT_TEXT});
  },

  mouseEnter() {
    set(this,'model', {tooltipText: DEFAULT_TEXT});
  },

  isSupported: function() {
    return get(this,'clipboardText.length') && (!isSafari || document.queryCommandSupported('copy'));
  }.property('clipboardText'),

  actions: {
    alertSuccess: function() {
      let orig = get(this,'model.tooltipText');

      this.setProperties({
        status: 'success',
        model: {tooltipText: 'copyToClipboard.copied'}
      });

      later(() =>{
        this.setProperties({
          status: null,
          model: {tooltipText: orig}
        });
      }, DELAY);
    },
  },

  buttonClasses: computed('status', function() {
    let status = get(this,'status');
    let out = `btn ${get(this,'color')}`;

    if (status) {
      out += ' text-success';
    } else {
      out += ' text-muted';
    }

    if (get(this,'size')) {
      out += ' small';
    }

    return out;

  }),
});