import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import {
  UNotification,
  UNotificationProps,
} from '../components/UNotification/UNotification'
import { UButton } from '../components'

import { useNotification } from '../components'
const $useNotification = useNotification()

const meta: Meta<typeof UNotification> = {
  title: 'Example/Notification',
  component: UNotification,
  tags: ['autodocs'],
  argTypes: {
    color: {
      control: 'select',
      options: ['primary', 'success', 'warning', 'error'],
    },
    delay: {
      control: 'select',
      options: [1000, 2000, 3000, 4000, 5000],
    },
    iconTop: {
      control: 'select',
      options: [undefined, 'folder', 'checkVerified1', 'star2', 'codepen'],
    },
    iconLeft: {
      control: 'select',
      options: [undefined, 'folder', 'checkVerified1', 'star2', 'codepen'],
    },
    position: {
      control: 'select',
      options: ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
    },
    elevation: { control: 'select', options: ['none', 'sm', 'md', 'lg'] },
  },
}

export default meta

type Story = StoryObj<typeof UNotification>

export const Notification: Story = {
  render: (args: UNotificationProps) => ({
    components: { UNotification, UButton },
    setup() {
      const notify = () => {
        $useNotification?.run({
          title: 'network error',
          text: 'Something goes wrong!',
          color: 'error',
          iconLeft: 'activity',
          delay: 50000,
        })
      }
      const closeNotification = () => {
        console.log('closed :|')
      }
      return { args, notify, closeNotification }
    },
    template: `<div class="relative overflow-hidden h-[560px]">
    <UButton type="default" @click="notify">Notify</UButton>
    <UNotification @close="closeNotification"></UNotification>
    </div>`,
  }),
  args: {
    color: 'success',
    iconLeft: 'checkVerified1',
    position: 'bottomRight',
  } as UNotificationProps,
}

export const ResendEmailNotification: Story = {
  render: (args: UNotificationProps) => ({
    components: { UNotification, UButton },
    setup() {
      return { args }
    },
    template: `<div class="relative h-[560px]">  
    <UNotification 
    v-bind="args"
    v-model:isActive="isNotification">
        <template #notificationTitle>Done</template>
        <template #notificationText>We sent the link again</template>  
    </UNotification>
    </div>`,
  }),
  args: {
    color: 'success',
    iconLeft: 'checkVerified1',
    position: 'bottomRight',
  } as UNotificationProps,
}