import { Component, h, Prop, Host } from "@stencil/core";
import { ButtonVariants } from "../../utils/utils";
import { ButtonStates } from "../../utils/utils";
import colors from "../../global/colors";

const fillcolors = {
  primary: colors.brandMain,
  secondary: "white"
};

@Component({
  tag: "hy-button",
  styleUrl: "button.scss",
  shadow: false
})
export class Button {
  @Prop() variant: ButtonVariants = "primary";
  @Prop() state: ButtonStates = "enabled";

  @Prop() icon?: string;
  @Prop() iconRight?: string;

  render() {
    const classAttributes = ["hy-button", this.variant, this.state];
    const iconFillColor = fillcolors[this.variant];
    return (
      <Host>
        <button class={classAttributes.join(" ")}>
          {!!this.icon && (
            <span class="button-icon button-icon-left">
              <hy-icon icon={this.icon} fill={iconFillColor} size={13} />
            </span>
          )}
          <span class="button-text">
            <slot />
          </span>
          {!!this.iconRight && (
            <span class="button-icon button-icon-right">
              <hy-icon icon={this.iconRight} fill={iconFillColor} size={13} />
            </span>
          )}
        </button>
      </Host>
    );
  }
}