<template>
  <div>
    <notifications data-testid="notification" classes="my-notification" position="bottom" width="412px">
      <template #body="props">
        <div class="my-notification vue-notification new-style" v-bind="props">
          <div class="notification-content">
            <v-btn
              :icon="(props.item.data as NotificationData).icon"
              :color="getButtonColor(props.item.type)"
              variant="text"
              size="small"
              class="icon-btn"
            />
            <div class="notification-message ml-3 pr-0">{{ props.item.text }}</div>
            <v-btn :color="getButtonColor(props.item.type)" variant="flat" class="ml-auto">
              <span>{{ t('labels.undo') }}</span>
            </v-btn>
            <v-btn class="shark-400" icon="close" variant="text" size="small" @click="props.close" />
          </div>
        </div>
      </template>
    </notifications>
  </div>
</template>

<script setup lang="ts">
import { Notifications, useNotification } from '@kyvg/vue3-notification';
import { useI18n } from 'vue-i18n';

interface NotificationData {
  icon: string;
}

const { t } = useI18n();
const { notify } = useNotification();

function notifySuccess(): void {
  notify({
    type: 'success',
    text: 'This is a Success message!!',
    duration: 300000,
    data: { icon: 'check_circle' }
  });
}

function notifyError(): void {
  notify({
    type: 'error',
    text: 'This is an Error Message!!',
    duration: 300000,
    data: { icon: 'error' }
  });
}

function notifyWarning(): void {
  notify({
    type: 'warn',
    text: 'This is a warning Message!!',
    duration: 300000,
    data: { icon: 'warning' }
  });
}

function notifyInfo(): void {
  notify({
    type: 'info',
    text: 'This is an informational message!!',
    duration: 300000,
    data: { icon: 'check_circle' }
  });
}

function getButtonColor(type?: string): string {
  switch (type) {
    case 'success':
      return 'rgba(29, 127, 22, 1)';
    case 'error':
      return 'rgba(202, 52, 74, 1)';
    case 'warn':
      return 'rgba(166, 103, 2, 1)';
    case 'info':
      return 'rgba(27, 109, 131, 1)';
    default:
      return '';
  }
}

defineExpose({ notifyInfo, notifySuccess, notifyWarning, notifyError, getButtonColor });
</script>

<style lang="scss">
.vue-notification {
  border-radius: 12px;
  border-left-color: transparent !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #1d1d20 !important;
}

.notification-message {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.notification-content {
  display: flex;
  align-items: center;
  padding: 0px;
  margin: 0px;
}
</style>
