<template>
  <div
    aria-live="polite"
    class="ui-snackbar"
    role="status"
    @mouseenter="pauseDismiss"
    @mouseleave="resumeDismiss"
    @focusin="pauseDismiss"
    @focusout="resumeDismiss"
  >
    <span class="ui-snackbar__icon-wrapper">
      <UiIcon
        :name="snackbarIcon"
        class="ui-snackbar__icon"
        size="16"
      />
    </span>
    <p class="ui-snackbar__text">
      <span class="ui-snackbar__message">{{ message }}</span>
      <strong
        v-if="snackbarHighlight"
        class="ui-snackbar__highlight"
      >{{ snackbarHighlight }}</strong>
    </p>
    <button
      v-if="snackbarActionText"
      class="ui-snackbar__action"
      type="button"
      @click="runSnackbarAction"
    >
      {{ actionLabel }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { convertString } from '../../runtime';

const {
  snackbarText,
  snackbarIcon,
  snackbarHighlight,
  snackbarActionText,
  runSnackbarAction,
  pauseDismiss,
  resumeDismiss,
} = useSnackbar();

const { t, te } = useI18n();

const convertSnackKey = computed(() =>
  convertString().toSnakeCase(snackbarText.value)
);

const message = computed(() =>
  te(`snackbar.${convertSnackKey.value}`)
    ? t(`snackbar.${convertSnackKey.value}`)
    : t('snackbar.something_went_wrong')
);

const actionLabel = computed(() =>
  te(`snackbar.${snackbarActionText.value}`)
    ? t(`snackbar.${snackbarActionText.value}`)
    : t('snackbar.undo')
);
</script>

<style lang="scss">
.ui-snackbar {
  @include font-sm;

  position: fixed;
  z-index: $z-index-popup;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 16px;
  border: 1px solid $snackbar-border;
  border-radius: $radius-md;
  background-color: $snackbar-bg;
  color: $snackbar-text;
  box-shadow: $snackbar-shadow;

  @include from-br(sm) {
    left: 0;
    right: 0;
    width: max-content;
    min-width: 300px;
    max-width: 448px;
    margin-inline: auto;
  }

  &.v-enter-active,
  &.v-leave-active {
    transition: opacity 300ms ease, transform 300ms ease;
  }

  &.v-enter-from,
  &.v-leave-to {
    opacity: 0;
    transform: translateY(16px);
  }
}

.ui-snackbar__icon-wrapper {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: $radius-full;
  background-color: $snackbar-icon-bg;
}

.ui-snackbar__icon {
  color: $snackbar-icon;
}

.ui-snackbar__text {
  display: flex;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
}

.ui-snackbar__message {
  flex-shrink: 0;
}

.ui-snackbar__highlight {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: $snackbar-highlight;
}

.ui-snackbar__action {
  @include font-sm;

  padding: 6px 12px;
  border-radius: $radius-md;
  font-weight: 600;
  background-color: $snackbar-action-bg;
  color: $snackbar-action-text;

  @include hover(background-color) {
    background-color: $snackbar-action-bg--hover;
  }
}
</style>
