<template>
  <div class="space-button button no-outline" :class="buttonClasses">
    <div class="wrapper" :class="loading">
      <Loader v-show="loading" />
      <span v-show="!loading" class="slot h700 bold caps">
        <slot />
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
export default defineComponent({
  props: {
    loading: {
      default: false,
      type: Boolean,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    const emitClick = (): void => {
      if (!props.disabled) {
        emit("click", null);
      }
    };
    const buttonClasses = computed(() => {
      return {
        disabled: props.disabled,
        loading: props.loading,
      };
    });

    return {
      emitClick,
      buttonClasses,
      props,
    };
  },
});
</script>

<style lang="scss">
.space-button {
  user-select: none;
  outline: none;
  height: var(--form-item-height);
  --background: var(--button-background-default);
  --color: var(--button-text-color-default);
  --border: none;
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  --overlay-color: var(--button-overlay);
  --overlay-opacity: 0;
  --button-loader-color: var(--button-loader-color-default);

  .wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    border-radius: var(--form-border-radius);
    box-shadow: var(--shadow);
    background-color: var(--background);
    color: var(--color);
    border: var(--border);
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 0 10px;
    white-space: nowrap;

    &.loading {
      cursor: wait;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      border-radius: var(--form-border-radius);
      background-color: var(--overlay-color);
      opacity: var(--overlay-opacity);
      transition: opacity 0.3s ease;
    }

    .icon {
      width: var(--form-icon-size);
      height: var(--form-icon-size);

      &:not(.loader) {
        path {
          fill: var(--color);
          transition: fill 0.3s ease, stroke 0.3s ease;
        }

        &:first-child {
          margin-right: 8px;
        }

        &:last-child {
          margin-left: 8px;
        }
      }

      &.loader {
        display: none;

        path {
          stroke: var(--color);
          stroke-dasharray: 42;
        }
      }
    }

    .slot {
      //z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.alert {
    --background: var(--button-background-alert);
  }

  &.success {
    --background: var(--button-background-success);
  }

  &.inverted {
    --background: var(--button-background-inverted);
    --color: var(--button-text-color-inverted);
    --loader-color: var(--button-loader-color-inverted);

    &:hover {
      --overlay-color: var(--fill-primary);
      --overlay-opacity: 1;
    }
  }

  &.shadow {
    --background: transparent;
    --color: var(--blue);

    &:hover {
      --background: var(--blue);
      --color: white;
    }
  }

  &.primary {
    --background: var(--background-primary);
    --color: var(--blue);
    --loader-color: var(--button-loader-color-hollow);

    &:hover {
      --shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
    }
  }

  &.hollow {
    --background: transparent;
    --shadow: none;
    --color: var(--button-text-color-hollow);
    --loader-color: var(--button-loader-color-hollow);
  }

  &.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
  }

  &.cancel {
    --shadow: none;
    --background: transparent;
    --color: var(--button-text-color-cancel);
    --loader-color: var(--button-loader-color-cancel);
  }

  &.loading {
    pointer-events: none;
  }
}
</style>
