<script lang="ts" setup>
import IconLoader from "~/components/icons/iconLoader.vue";
import type {ButtonProps} from "~/components/ui/Buttons/types.buttons";
import {ButtonKind} from "~/components/ui/Buttons/constants.buttons";
import IconAdd from "~/components/icons/iconAdd.vue";
import IconSend from "~/components/icons/iconSend.vue";
import {useWindowSize} from "@vueuse/core";

const {width} = useWindowSize()

const props = withDefaults(defineProps<ButtonProps>(), {
  loading: false,
  kind: ButtonKind.CreateMaterial

})

const getButtonTextAndIcon = computed(() => {
  switch (props.kind) {
    case ButtonKind.CreateStory:
      return {
        text: 'Создать историю',
        icon: IconAdd,
      };
    case ButtonKind.CreateMaterial:
      return {
        text: 'Создать материал',
        icon: IconAdd,
      };
    case ButtonKind.Send:
    default:
      return {
        text: 'Сохранить',
        icon: IconSend
      }
  }
})
</script>

<template>
  <button type="button" class="button">
    <IconLoader class="icon loader" :class="{loading}" v-if="loading" />

    <template v-else>
      <span v-if="width > 768">{{getButtonTextAndIcon.text}}</span>
      <component v-else :is="getButtonTextAndIcon.icon" class="icon"/>
    </template>
  </button>
</template>

<style scoped lang="scss">
.button {
  border-radius: 12px;
  padding: 0 24px;
  height: 44px;
  display: flex;
  align-items: center;
  background: #E7F8FE;
  color: var(--text-blue);

  font-family: FuturaPT, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;

  cursor: pointer;
  transition: all .3s ease;

  &:hover:not(:disabled) {
    background: #D2F3FF;
  }

  &:disabled {
    background: #E7F8FE;
    cursor: not-allowed;
  }

  &.loading {
    pointer-events: none;
  }
}

.icon {
  @include mixins.square(20px);
}

.loader {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

@media screen and (max-width: 768px) {
  .button {
    padding: 10px;
    height: 48px;
  }

  .icon {
    @include mixins.square(28px);
  }
}
</style>
