<template>
  <button
    class="base-btn text-center"
    :class="`${variant}-btn ${size}-btn ${colorText ? 'color-text-border' : ''}`"
    :style="{ 
      padding: justIcon ? '8px' : '' ,
      background: color,
      color: colorText,
      width: width,
      height: height,
      borderColor: variant == 'primary' && color ? 'unset' : ''
    }"
    :disabled="disabled"
  >
    <base-icon
      v-if="iconLeft"
      :iconName="iconLeft"
      height="20"
      width="20"
      :color="colorText ? colorText : '#3e7dc0'"
      :class="{ 'mr-2': !justIcon }"
    />
    <slot />
    <base-icon
      v-if="iconRight"
      :iconName="iconRight"
      height="20"
      width="20"
      :color="colorText ? colorText : '#3e7dc0'"
      :class="{ 'ml-2': !justIcon }"
    />
  </button>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: { BaseIcon },
  props: {
    disabled: {
      type: [Boolean],
      default: false,
    },
    variant: {
      type: [String],
      default: "primary",
      validator: function (value) {
        return (
          ["primary", "secondary", "danger", "success", "tertiary", "tertiary-danger"].indexOf(
            value
          ) !== -1
        );
      },
    },
    justIcon: {
      type: [Boolean],
      default: false,
    },
    iconLeft: {
      type: [String],
      default: "",
    },
    iconRight: {
      type: [String],
      default: "",
    },
    size: {
      type: [String],
      default: "medium"
    },
    color: {
      type: [String],
      default: ""
    },
    colorText: {
      type: [String],
      default: ""
    },
    width: {
      type: [String],
      default: ""
    },
    height: {
      type: [String],
      default: ""
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.base-btn {
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;

  &.full-btn {
    width: 100%;
    padding: 8px 20px;
  }

  &.medium-btn {
    padding: 8px 20px;
  }

  &.small-btn {
    padding: 8px 8px;
  }
}

.primary-btn {
  background: $dark-blue-4;
  border-color: $dark-blue-4;
  color: $neutral-0;
  svg > g {
    fill: $neutral-0;
  }
  &:hover {
    background: $dark-blue-5
      radial-gradient(circle, transparent 1%, $dark-blue-5 1%) center/15000%;
    border-color: $dark-blue-5;
  }
  &:active {
    background-size: 100%;
    background-color: $dark-blue-2;
    border-color: $dark-blue-2;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    background: $dark-blue-2;
    border-color: $dark-blue-2;
    pointer-events: none;
  }
}

.danger-btn {
  background: $critical-4;
  border-color: $critical-4;
  color: $neutral-0;
  svg > g {
    fill: $neutral-0;
  }
  &:hover {
    background: $critical-5
      radial-gradient(circle, transparent 1%, $critical-5 1%) center/15000%;
    border-color: $critical-5;
  }
  &:active {
    background-size: 100%;
    background-color: $critical-2;
    border-color: $critical-2;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    background: $critical-2;
    border-color: $critical-2;
    pointer-events: none;
  }
}

.success-btn {
  background: $success-4;
  border-color: $success-4;
  color: $neutral-0;
  svg > g {
    fill: $neutral-0;
  }
  &:hover {
    background: $success-5
      radial-gradient(circle, transparent 1%, $success-5 1%) center/15000%;
    border-color: $success-5;
  }
  &:active {
    background-size: 100%;
    background-color: $success-2;
    border-color: $success-2;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    background: $success-2;
    border-color: $success-2;
    pointer-events: none;
  }
}

.secondary-btn {
  color: $dark-blue-4;
  background: $neutral-0;
  border-color: $neutral-2;
  &:hover {
    background: $neutral-0;
    border-color: $dark-blue-3;
  }
  &:active {
    background-color: $dark-blue-1;
    border-color: $dark-blue-3;
    background-size: 100%;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    background: $neutral-0;
    color: $dark-blue-2;
    pointer-events: none;
    svg > g {
      fill: $dark-blue-2;
    }
  }
}

.color-text-border {
  &:hover {
    border-color: unset;
  }
}

.tertiary-btn {
  color: $dark-blue-4;
  background: transparent;
  border-color: transparent;
  svg > g {
    fill: $dark-blue-4;
  }
  &:hover {
    color: $dark-blue-5;

  }
  &:active {
    color: $dark-blue-4;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    color: $dark-blue-2;
    cursor: not-allowed;
    svg > g {
      fill: $dark-blue-2;
    }
  }
}
.tertiary-danger-btn {
  color: $critical-4;
  background: transparent;
  border-color: transparent;
  svg > g {
    fill: $critical-4;
  }
  &:hover {
    color: $critical-5;
  }
  &:active {
    color: $critical-4;
    transition: background 0s;
  }
  &:disabled,
  &.disabled {
    color: $critical-2;
    cursor: not-allowed;
    svg > g {
      fill: $critical-2;
    }
  }
}
</style>
