import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import ChoreItem from '@/components/ChoreItem.vue';
import type { ChoreWithCompletion } from '@/types/chore';

// Minimal mock for a chore
const createMockChore = (overrides: Partial<ChoreWithCompletion> = {}): ChoreWithCompletion => ({
    id: 1,
    name: 'Test Chore',
    description: 'A chore for testing.',
    is_completed: false,
    completed_at: null,
    updating: false,
    next_due_date: new Date().toISOString(),
    current_assignment_id: 101,
    // Base properties
    group_id: null,
    created_by_id: 1,
    frequency: 'daily',
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
    type: 'personal',
    assignments: [],
    ...overrides,
});

describe('ChoreItem.vue', () => {
    it('renders chore name and description', () => {
        const chore = createMockChore();
        const wrapper = mount(ChoreItem, {
            props: {
                chore,
                timeEntries: [],
                activeTimer: null,
            },
        });

        expect(wrapper.text()).toContain('Test Chore');
        expect(wrapper.text()).toContain('A chore for testing.');
    });

    it('applies a line-through style when chore is completed', () => {
        const chore = createMockChore({ is_completed: true });
        const wrapper = mount(ChoreItem, {
            props: {
                chore,
                timeEntries: [],
                activeTimer: null,
            },
        });

        const nameSpan = wrapper.find('span.line-through');
        expect(nameSpan.exists()).toBe(true);
    });

    it('emits "toggle-completion" when the checkbox is clicked', async () => {
        const chore = createMockChore();
        const wrapper = mount(ChoreItem, {
            props: { chore, timeEntries: [], activeTimer: null },
        });

        await wrapper.find('input[type="checkbox"]').setValue(true);

        expect(wrapper.emitted('toggle-completion')).toHaveLength(1);
        expect(wrapper.emitted('toggle-completion')![0]).toEqual([chore]);
    });

    it('emits "edit" when the edit button is clicked', async () => {
        const chore = createMockChore();
        const wrapper = mount(ChoreItem, {
            props: { chore, timeEntries: [], activeTimer: null },
        });

        // Find button by icon name or a more specific selector if possible
        await wrapper.find('button[title="Edit"]').trigger('click');

        expect(wrapper.emitted('edit')).toHaveLength(1);
        expect(wrapper.emitted('edit')![0]).toEqual([chore]);
    });

    it('emits "delete" when the delete button is clicked', async () => {
        const chore = createMockChore();
        const wrapper = mount(ChoreItem, {
            props: { chore, timeEntries: [], activeTimer: null },
        });

        await wrapper.find('button[title="Delete"]').trigger('click');

        expect(wrapper.emitted('delete')).toHaveLength(1);
        expect(wrapper.emitted('delete')![0]).toEqual([chore]);
    });

    it('shows correct timer icon and emits "start-timer"', async () => {
        const chore = createMockChore();
        const wrapper = mount(ChoreItem, {
            props: { chore, timeEntries: [], activeTimer: null },
        });

        const playButton = wrapper.find('button[title="Timer"]');
        expect(playButton.find('svg[data-icon-name="heroicons:play-20-solid"]').exists()).toBe(true);

        await playButton.trigger('click');
        expect(wrapper.emitted('start-timer')).toHaveLength(1);
    });

    it('shows correct timer icon and emits "stop-timer" when timer is active', async () => {
        const chore = createMockChore();
        const activeTimer = {
            id: 99,
            chore_assignment_id: 101,
            start_time: '2023-01-01T10:00:00Z',
            end_time: null,
            user_id: 1,
        };
        const wrapper = mount(ChoreItem, {
            props: { chore, timeEntries: [], activeTimer },
        });

        const pauseButton = wrapper.find('button[title="Timer"]');
        expect(pauseButton.find('svg[data-icon-name="heroicons:pause-20-solid"]').exists()).toBe(true);

        await pauseButton.trigger('click');
        expect(wrapper.emitted('stop-timer')).toHaveLength(1);
        expect(wrapper.emitted('stop-timer')![0]).toEqual([chore, activeTimer.id]);
    });
}); 