<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

export default @Component({
  functional: true,
  name: 'itfButton',
  components: {
  }
})
class itfButton extends Vue {
  @Prop(Boolean) labeled;
  @Prop(Boolean) primary;
  @Prop(Boolean) default;
  @Prop(Boolean) secondary;
  @Prop(Boolean) loading;
  @Prop(Boolean) small;
  @Prop(Boolean) large;
  @Prop(Boolean) icon;
  @Prop(Boolean) block;
  @Prop(Boolean) squircle;
  @Prop(String) loadingText;
  @Prop(String) color;
  @Prop(Boolean) disabled;
  @Prop({ type: [String, Object] }) to;
  @Prop(String) href;
  @Prop(String) target;
  @Prop() class;

  render (createElement, { data, slots, children, props }) {
    const {
      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
      class: classNames
    } = props;
    const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
    const staticClass = (data.staticClass || '') + ' itf-button btn';
    const comProps = {
      ...data,
      attrs: {
        ...data.attrs,
        tabindex: 0
      },
      class: {
        [`btn-${color}`]: color,
        'itf-button__block': block,
        'labeled': labeled,
        'disabled': disabled || loading,
        'btn-primary': primary,
        'btn-default': defaultStyle,
        'btn-basic': !primary && !secondary && !color && !defaultStyle,
        'btn-secondary': secondary,
        // 'btn-squircle': squircle,
        'btn-sm': small,
        'btn-lg': large,
        // 'px-3': small && !icon,
        // 'px-5': large && !icon,
        // 'px-4': !icon && !large && !small,
        'btn-icon': icon,
        'loading': loading
      },
      props,
      staticClass
    };
    if (data.class) {
      if (typeof data.class === 'string') {
        comProps.class[data.class] = true;
      } else {
        comProps.class = {
          ...data.class,
          ...comProps.class
        };
      }
    }
    if (component === 'button') {
      comProps.attrs.type = 'button';
    }
    if (href) {
      comProps.attrs.href = href;
    }
    if (target) {
      comProps.attrs.target = target;
    }
    let childs = [];
    if (loading) {
      childs.push([createElement('div', { staticClass: 'itf-spinner', class: { 'itf-spinner__white': primary } })]);
    }
    if (loading && loadingText) {
      childs.push([createElement('div', loadingText)]);
    } else if (children && children.length) {
      childs.push(...children);
    }
    return createElement(
      component,
      comProps,
      childs
    )
  }
}
</script>
