<template>
  <UiDropdown
    class="notifications-dropdown"
    dropdown-class="notifications-dropdown__content"
    placement="bottom-end"
    trigger="hover"
    :offset="12"
    teleport
  >
    <template #default="{ isActive }">
      <NotifyButton
        icon="bell"
        :count="0"
        class="notifications-dropdown__trigger"
        :state="isActive ? 'hover' : undefined"
      />
    </template>

    <template #dropdown>
      <div class="notifications-dropdown__header">
        <h3>Notifications</h3>

        <UiButton class="ml-a" size="small" icon="s-check-seen" type="ghost">
          Mark all as read
        </UiButton>

        <UiButton class="ml-4" icon="s-kebab-android" type="link" size="small" color="secondary" />
      </div>

      <form class="notifications-dropdown__filter">
        <UiSwitcher
          id="notification_type"
          :options="[
            { label: 'All', value: 'all' },
            { label: 'Поступления', value: 'p' },
            { label: 'Списания', value: 's' },
          ]"
          size="small"
        />
      </form>

      <div class="notifications-dropdown__list">
        <NotificationCardWithdrawCreated title="Новый вывод средств создан" subtitle="Адрес: 7u5RQ9g....bkNfG" />
        <NotificationCardDeposit title="На ваш кошелек поступил новый платеж" subtitle="Адрес: 7u5RQ9g....bkNfG" />
        <NotificationCardCompletedWithdraw title="Вывод средств был проведен успешно" subtitle="Адрес: 7u5RQ9g....bkNfG" />
        <NotificationCardSignIn title="Вход в учетную запись" subtitle="IP: 185.218.108.156" read />
      </div>
    </template>
  </UiDropdown>
</template>

<script setup>
import { useForm } from 'vee-validate'

useForm({
  keepValuesOnUnmount: true,
  initialValues: {
    notification_type: 'all',
  },
})
</script>

<style lang="scss">
.notifications-dropdown {
  cursor: pointer;

  &__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  &__filter {
    margin-bottom: 8px;
  }

  &__list {
    //margin-inline: -16px;
    //padding-inline: 16px;
    //max-height: 150px;
    //overflow: auto;

    > *:not(:last-child) {
      margin-bottom: 8px;
    }
  }

  &__content {
    position: relative;
    width: 406px;
    padding: 16px !important;
    box-shadow: 0px 4px 4px 0px #6C86AD40;

    &::before {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: -8px;
      right: 12px;
      background-color: $clr-white;
      border-radius: 2px;
      transform: rotateZ(45deg);
    }
  }
}
</style>
