<template>
  <button
   type="button"
   class="custom-button"
   :class="{
     'custom-button_interactive': interactive,
     'custom-button_persistent-active': isPersistentActive,
     [themeClass]: true,
     [borderRadiusClass]: true,
     'custom-button_full-width': fullWidth,
     'custom-button_no-padding': noPadding,
     'custom-button_no-border': noBorder,
     'custom-button_disabled': disabled,
   }"
   :disabled="disabled"
   @mouseover="onMouseOver"
   @mouseout="onMouseOut"
   @focus="onFocus"
   @blur="onBlur"
   @click="onClick"
 >
   <span class="custom-button__content">
     <icon-base
       v-if="iconParams"
       v-bind="iconParams"
       class="custom-button__icon"
     />
     <slot :is-dark-background="isComponentHaveDarkBackground" />
   </span>
 </button>
</template>


<script>
// UI components
import IconBase from '@/components/interfaces/Icons/IconBase.vue';


// Config
import themes from './themes';


export default {
  name: 'CustomButton',
   components: { IconBase },
   emits: ['click', 'mouseover', 'mouseout', 'focus', 'blur'],
   props: {
       theme: {
           type: String,
           default: themes.GREY,
           validator: (value) => [
               themes.GREY, themes.GREEN, themes.RED, themes.HONEY, themes.WHITE,
           ].includes(value),
       },
       /**
        * Заливка кнопки цветом текущей темы.
        * Если "false" - цветом выделяются только текст и рамки.
        */
       fill: Boolean,
       /**
        * Свойство используется, если "interactive = true"
        */
       active: {
           type: Boolean,
           default: false,
       },
       /**
        * При значении "true" фон кнопки может меняться
        */
       interactive: {
           type: Boolean,
           default: false,
       },
       fullWidth: {
           type: Boolean,
           default: false,
       },
       noPadding: {
           type: Boolean,
           default: false,
       },
       noBorder: {
           type: Boolean,
           default: false,
       },
       borderRadiusSize: {
           type: String,
           default: 'middle',
           validator: (value) => ['small', 'middle', 'big'].includes(value),
       },
       iconParams: {
           type: Object,
           default: () => null,
       },
       disabled: {
           type: Boolean,
           default: false,
       },
   },
   data() {
       return {
           isOnHover: false,
           isInFocus: false,
       };
   },
   computed: {
       isPersistentActive() {
           return this.interactive && this.active;
       },
       /**
        * Возвращает истину, когда текущий фон кнопки тёмный
        *
        * @returns {boolean}
        */
       isComponentHaveDarkBackground() {
           let backgroundColorWasChanged = false;
           if (this.interactive) {
               backgroundColorWasChanged = true;
               if (!this.isOnHover && !this.isInFocus) {
                   backgroundColorWasChanged = false;
               }
           }
           if (this.isPersistentActive && !this.isOnHover && !this.isInFocus) {
               backgroundColorWasChanged = true;
           }


           // Темы "green" и "white" на данный момент имеют те же значения "background-color"
           // в активном состоянии.
           // Тема "grey" в активном состоянии меняет "background-color: grey -> green",
           // из чего следует, что если фон изменился, значит он тёмный.
           switch (this.theme) {
               case themes.GREEN:
               case themes.RED: return true;
               case themes.GREY: return backgroundColorWasChanged;
               case themes.WHITE: return false;
               default: return false;
           }
       },
       themeClass() {
           return `custom-button_theme-${this.theme}`;
       },
       borderRadiusClass() {
           return `custom-button_border-radius_${this.borderRadiusSize}`;
       },
   },
   methods: {
       setHover(value) {
           if (this.interactive) {
               this.isOnHover = value;
           }
       },
       setFocus(value) {
           if (this.interactive) {
               this.isInFocus = value;
           }
       },
       onMouseOver(event) {
           this.$emit('mouseover', event);
           this.setHover(true);
       },
       onMouseOut(event) {
           this.$emit('mouseout', event);
           this.setHover(false);
       },
       onFocus(event) {
           this.$emit('focus', event);
           this.setFocus(true);
       },
       onBlur(event) {
           this.$emit('blur', event);
           this.setFocus(false);
       },
       onClick(event) {
           this.$emit('click', event);
       },
   },
};
</script>


<style lang="scss" scoped>
@import '@/assets/sass/colors';


$u-breakpoint-md: 768px;


$custom-button-themes: (
   grey: (
       color: $u-dark,
       background-color: #EEF0EA,
       border-color: #EEF0EA,
       border-style: solid,
       active-color: $u-white,
       active-background-color: $u-green,
       active-border-color: $u-green,
   ),
   green: (
       color: $u-white,
       background-color: $u-green,
       border-color: $u-green,
       border-style: solid,
       active-color: $u-white,
       active-background-color: $u-green,
       active-border-color: $u-green,
   ),
   red: (
       color: $u-white,
       background-color: $u-danger,
       border-color: $u-danger,
       border-style: solid,
       active-color: $u-white,
       active-background-color: $u-danger,
       active-border-color: $u-danger,
   ),
   honey: (
       color: $u-green,
       background-color: #F6FCEB,
       border-color: $u-green,
       border-style: dashed,
       active-color: $u-green,
       active-background-color: #F6FCEB,
       active-border-color: $u-green,
   ),
   white: (
       color: $u-green,
       background-color: $u-white,
       border-color: $u-green,
       border-style: solid,
       active-color: $u-green,
       active-background-color: $u-white,
       active-border-color: $u-green,
   ),
);


@mixin custom-button-themes($component) {
 @each $theme, $custom-button-theme in $custom-button-themes {
   &_theme-#{$theme} {
     color: map-get($custom-button-theme, 'color');
     background-color: map-get($custom-button-theme, 'background-color');
     border: 1px map-get($custom-button-theme, 'border-style') map-get($custom-button-theme, 'border-color');


     &#{$component}_interactive {
       &#{$component}_persistent-active {
         color: map-get($custom-button-theme, 'active-color');
         background-color: map-get($custom-button-theme, 'active-background-color');
         border: 1px solid map-get($custom-button-theme, 'active-border-color');
       }
       &:not(#{$component}_persistent-active) {
         &:hover,
         &:active,
         &:focus {
           color: map-get($custom-button-theme, 'active-color');
           background-color: map-get($custom-button-theme, 'active-background-color');
           border: 1px solid map-get($custom-button-theme, 'active-border-color');
         }
       }
     }
   }
 }
}


// Other
$custom-button-border-radius-small:  4px;
$custom-button-border-radius-middle: 6px;
$custom-button-border-radius-big:    8px;


.custom-button {
 $root:       &;


 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height:  40px;
 padding:     10px 16px;
 font-size:   15px;
 font-weight: 500;
 line-height: 18px;
 word-break:  break-all;
 border:      0;
 cursor:      pointer;
 transition:  0.2s ease all;


 @include custom-button-themes($root);


 & > *,
 & > *:after,
 & > *:before {
   pointer-events: none;
 }


 &_full-width {
   width: 100%;
 }


 &_no-padding {
   padding: 0 !important;
 }


 &_no-border{
   border: none;
 }
 &_border-radius_small {
   border-radius: $custom-button-border-radius-small;
 }
 &_border-radius_middle {
   border-radius: $custom-button-border-radius-middle;
 }
 &_border-radius_big {
   border-radius: $custom-button-border-radius-big;
 }


 &__content {
   display: inline-flex;
   align-items: center;
   gap: 10px;
 }


 &_disabled {
   opacity: 0.7;
   user-select: none;
   pointer-events: none;
 }


 @media (max-width: $u-breakpoint-md) {
   padding: 3px 6px;
 }
}
</style>