import { describe, expect, it } from 'vitest';
import { mount } from '@vue/test-utils';

import ConfirmDialog from '../../../resources/js/Components/ConfirmDialog.vue';

const mountDialog = (props = {}) =>
    mount(ConfirmDialog, { props: { open: true, ...props } });

const escapeKey = () =>
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));

describe('ConfirmDialog', () => {
    it('renders nothing when closed', () => {
        const wrapper = mount(ConfirmDialog, { props: { open: false } });

        expect(wrapper.find('[role="dialog"]').exists()).toBe(false);
    });

    it('renders the title, message, and confirm label when open', () => {
        const wrapper = mountDialog({
            title: 'Delete prompt?',
            message: 'This is permanent.',
            confirmLabel: 'Delete',
        });

        expect(wrapper.find('[role="dialog"]').attributes('aria-modal')).toBe('true');
        expect(wrapper.find('h2').text()).toBe('Delete prompt?');
        expect(wrapper.find('p').text()).toBe('This is permanent.');

        const buttons = wrapper.findAll('button');
        expect(buttons).toHaveLength(2);
        expect(buttons[0].text()).toBe('Cancel');
        expect(buttons[1].text()).toBe('Delete');
    });

    it('omits the message paragraph when there is no message', () => {
        const wrapper = mountDialog({ message: '' });

        expect(wrapper.find('p').exists()).toBe(false);
    });

    it('emits "confirm" when the confirm button is clicked', async () => {
        const wrapper = mountDialog();

        await wrapper.findAll('button')[1].trigger('click');

        expect(wrapper.emitted('confirm')).toHaveLength(1);
        expect(wrapper.emitted('cancel')).toBeUndefined();
    });

    it('emits "cancel" when the cancel button is clicked', async () => {
        const wrapper = mountDialog();

        await wrapper.findAll('button')[0].trigger('click');

        expect(wrapper.emitted('cancel')).toHaveLength(1);
    });

    it('emits "cancel" on Escape while open, and ignores other keys', async () => {
        const wrapper = mountDialog();

        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
        expect(wrapper.emitted('cancel')).toBeUndefined();

        escapeKey();
        expect(wrapper.emitted('cancel')).toHaveLength(1);
    });

    it('detaches the Escape handler when closed or unmounted', async () => {
        const wrapper = mountDialog();

        await wrapper.setProps({ open: false });
        escapeKey();
        expect(wrapper.emitted('cancel')).toBeUndefined();

        await wrapper.setProps({ open: true });
        wrapper.unmount();
        escapeKey();
        expect(wrapper.emitted('cancel')).toBeUndefined();
    });
});