import { isString } from 'lodash';
import { Component, Prop, Emit, Vue, Watch } from 'vue-property-decorator';

@Component({})
export default class Button extends Vue {
  @Prop() action: boolean | '';
  @Prop() positive: boolean | '';
  @Prop() negative: boolean | '';
  @Prop() transparent: boolean | '';
  @Prop() round: boolean | '';
  @Prop() loading: boolean;
  @Prop() disable: boolean;
  @Prop() percentage: number;
  @Prop() darkPercentage: boolean;
  @Prop() label: string;
  @Prop() icon: string;
  @Prop() iconRight: string;
  @Prop() noWrap: boolean;
  @Prop() align: 'left' | 'right' | 'center' | 'around' | 'between' | 'evenly';
  @Prop() stack: boolean;
  @Prop() stretch: boolean;
  @Prop() type: string;
  @Prop() tabindex: number;
  @Prop() disableColor: string;

  @Prop() to: string;
  @Prop() replace: boolean;
  @Prop() append: boolean;
  @Prop() href: string;
  @Prop() target: '_blank' | '_self' | '_parent' | '_top';

  @Prop() size: string;

  @Emit('click')
  click(evt: MouseEvent): MouseEvent {
    return evt;
  }

  get disableStyle() {
    return {
      background: this.disable ? this.$attrs['disabled-background-color'] : '',
      color: this.disable ? this.$attrs['disabled-color'] : '',
    }
  }

  propIsSet(prop: boolean | ''): boolean {
    if (isString(prop)) return prop === '';
    return prop;
  }
}
