<template>
  <button
    class="btn"
    :class="{
      'btn-lg': lg || size === 'lg',
      'btn-md': size === 'md',
      'btn-sm': sm || size === 'sm',
      'btn-xs': size === 'xs',
      'btn-primary': primary,
      'btn-secondary': secondary,
      'btn-outline-primary': outlinePrimary,
      'btn-outline-secondary': outlineSecondary,
      'c-loading': isLoading,
    }"
    :type="type"
    @click="clickHandler"
    v-on="$listeners"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'Button',

  props: {
    lg: Boolean,
    sm: Boolean,
    size: String, // xs, sm, md, lg
    primary: Boolean,
    secondary: Boolean,
    outlinePrimary: Boolean,
    outlineSecondary: Boolean,
    type: {
      type: String,
      default: 'button', // submit|button|reset
    },
    action: Function,
    async: Boolean,
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      isLoading: false,
    }
  },

  methods: {
    async clickHandler() {
      if (typeof this.action !== 'function') {
        return
      }

      if (this.async) {
        this.isLoading = true
        try {
          await this.action()
        } finally {
          this.isLoading = false
        }
      } else {
        this.action()
      }
    },
  },
}
</script>

<style lang="postcss" scoped>
  .btn {
    position: relative;
    cursor: pointer;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 24px;
    background: transparent;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 16px;
    padding: 0.8rem 1rem;

    .c-btn__icon {
      vertical-align: top;
      margin-top: 0;
      margin-right: 0.5rem;
    }

    &:hover:enabled {
      background-color: var(--fake-black);
      color: var(--white);

      .c-btn__icon {
        rect, path, g, use {
          fill: var(--white);
        }
      }
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    &.c-loading {
      border: 0;
    }
  }

  .btn-primary {
    color: var(--white);
    background-color: var(--purple-light-mode);
    border-color: var(--purple-light-mode);

    &:hover:enabled {
      background-color: var(--dark-purple);
      border-color: var(--dark-purple);

      .c-btn__icon {
        rect, path, g, use {
          fill: var(--white);
        }
      }
    }

    .dark-mode & {
      color: var(--fake-black);
      background-color: var(--blue-dark-mode);
      border-color: var(--blue-dark-mode);

      &:hover:enabled {
        background-color: var(--dark-blue-dark-mode);
        border-color: var(--dark-blue-dark-mode);

        .c-btn__icon {
          rect, path, g, use {
            fill: var(--fake-black);
          }
        }
      }
    }
  }

  .btn-secondary {
    color: var(--white);
    background-color: var(--false-alarm-red);
    border-color: var(--false-alarm-red);

    &:hover:enabled {
      background-color: var(--false-alarm-deep-red);
      border-color: var(--false-alarm-deep-red);

      .c-btn__icon {
        rect, path, g, use {
          fill: var(--white);
        }
      }
    }

    .dark-mode & {
      color: var(--fake-black);
      background-color: var(--false-alarm-red);
      border-color: var(--false-alarm-red);

      &:hover:enabled {
        background-color: var(--false-alarm-deep-red);
        border-color: var(--false-alarm-deep-red);

        .c-btn__icon {
          rect, path, g, use {
            fill: var(--fake-black);
          }
        }
      }
    }
  }

  .btn-outline-primary {
    color: var(--purple-light-mode);
    background-color: transparent;
    border-color: var(--purple-light-mode);

    &:hover:enabled {
      color: var(--dark-purple);
      background-color: transparent;
      border-color: var(--dark-purple);
    }

    .dark-mode & {
      color: var(--blue-dark-mode);
      background-color: transparent;
      border-color: var(--blue-dark-mode);

      &:hover:enabled {
        color: var(--dark-blue-dark-mode);
        background-color: transparent;
        border-color: var(--dark-blue-dark-mode);
      }
    }
  }

  .btn-outline-secondary {
    color: var(--false-alarm-red);
    background-color: transparent;
    border-color: var(--false-alarm-red);

    &:hover:enabled {
      color: var(--false-alarm-deep-red);
      background-color: transparent;
      border-color: var(--false-alarm-deep-red);
    }

    .dark-mode & {
      color: var(--false-alarm-red);
      background-color: transparent;
      border-color: var(--false-alarm-red);

      &:hover:enabled {
        color: var(--false-alarm-deep-red);
        background-color: transparent;
        border-color: var(--false-alarm-deep-red);
      }
    }
  }

  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 40px;
    min-width: 140px;
  }

  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    min-height: 48px;
    min-width: 190px;
  }

  .btn-md {
    padding: 0.8rem 1rem;
  }

  .btn-xs {
    padding: 1px;
  }
</style>
