<script>
// @flow
/** @jsx h */
import uiVariables from 'scss/importables/_ui.import.scss'; // eslint-disable-line

const regexRGBA = /rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/;
const { opacityLowMaximum, boxShadowButtonWidth } = uiVariables;

function elementBackgroundColor(ev) {
  const rgbValue = window.getComputedStyle(ev.target).getPropertyValue('background-color');

  return rgbValue.replace(regexRGBA, `rgba$1,${opacityLowMaximum})`);
}
function showBoxShadow(ev) {
  ev.target.style.boxShadow = `${boxShadowButtonWidth} ${elementBackgroundColor(ev)}`;
}
function hideBoxShadow(ev) {
  ev.target.style.boxShadow = `0 0 0 0 ${elementBackgroundColor(ev)}`;
}

export default {
  name: 'TaoButton',
  functional: true,
  props: {
    secondary: {
      type: Boolean,
      default: false,
    },
    tertiary: {
      type: Boolean,
      default: false,
    },
    success: {
      type: Boolean,
      default: false,
    },
    danger: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    large: {
      type: Boolean,
      default: false,
    },
    to: {
      type: String,
      default: '',
    },
    colored: {
      type: Boolean,
      default: false,
    },
  },
  render(h: Function, { props, children, data }: Functional) {
    const on = props.to ? 'nativeOn' : 'on';
    const settings = {
      class: {
        'text-brand-darker': (props.secondary || props.tertiary) && props.colored,
        'tao__btn-colored': props.colored,
        'text-01': (props.secondary || props.tertiary) && !props.colored,
        'tao__btn relative cursor-pointer font-medium mx-1 px-3 h-5': true,
        'tao__btn-secondary bg-transparent border-default': props.secondary,
        'tao__btn-tertiary bg-transparent': props.tertiary,
        'tao__btn-icon': props.icon,
        'tao__btn-large w-full': props.large,
        rounded: !props.loading,
        'tao__btn-loading rounded-sm-circle cursor-not-allowed': props.loading,
        'tao__btn-warning': props.warning,
        'tao__btn-danger': props.danger,
        'tao__btn-success': props.success,
        'border-none': !props.secondary,
        'text-white': !props.secondary && !props.tertiary,
        'bg-brand-button': !props.secondary && !props.tertiary,
      },
      [on]: {
        focus: showBoxShadow,
        blur: hideBoxShadow,
      },
      attrs: {
        disabled: props.disabled || props.loading,
        role: 'button',
      },
    };

    children.forEach((child) => {
      if (!child.tag && child.text) {
        child.tag = 'span';
      }
    });

    if (props.to) {
      return (
        <router-link
          tag='button'
          to={ props.to }
          {...data}
          {...settings}>
          { children }
        </router-link>
      );
    }
    return (
      <button
        {...data}
        {...settings}>
        { children }
      </button>
    );
  },
};
</script>
