import DemoNotificationNavigationDrawer from '@/components/demo/DemoNotificationNavigationDrawer.vue';
import { mount } from '@vue/test-utils';
import { defineComponent } from 'vue';
import { Notification, NotificationType } from '@3cr/viewer-types-ts';

const mockNotifications: Notification[] = [
  {
    avatar: 'avatar1.png',
    title: 'Notification 1',
    type: NotificationType.Text,
    text: 'This is a text notification',
    timestamp: new Date(),
    isUnread: true,
  },
  {
    avatar: 'avatar2.png',
    title: 'Notification 2',
    type: NotificationType.Download,
    timestamp: new Date(),
    onDownload: vi.fn(),
    isUnread: false,
  },
  {
    avatar: 'avatar3.png',
    title: 'Notification 3',
    type: NotificationType.Share,
    timestamp: new Date(),
    onShare: vi.fn(),
    isUnread: true,
  },
];

const DrawerWrapper = defineComponent({
  template: `
    <v-app>
      <DemoNotificationNavigationDrawer :notifications="notifications" />
    </v-app>
  `,
  props: {
    notifications: {},
  },
  components: {
    DemoNotificationNavigationDrawer,
  },
});

describe('NotificationDrawer.vue', () => {
  it('renders correctly with notifications', () => {
    const wrapper = mount(DrawerWrapper, {
      props: { notifications: mockNotifications },
    });

    expect(wrapper.findAll('.v-list-item').length).toBe(
      mockNotifications.length,
    );
    expect(wrapper.find('.text-h6').text()).toBe('labels.notifications');
  });
});