import VnLog from 'src/components/common/VnLog.vue';

describe('<VnLog />', () => {
    const mountComponent = (opt) => {
        cy.createWrapper(VnLog, opt);
    };

    it('renders with default props', () => {
        mountComponent({});
        cy.get('.q-field__label').should('contain', 'Location');
    });

    it('renders with model and url props', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('.q-field__label').should('contain', 'Location');
    });

    it('fetches data and displays logs', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.intercept('GET', `${url}/*`, { fixture: 'logs.json' }).as('getLogs');
        cy.wait('@getLogs');
        cy.get('.logs').should('exist');
    });

    it('applies filters correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('input[aria-label="Search"]').type('test search{enter}');
        cy.get('.logs').should('exist');
    });

    it('clears filters correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('input[aria-label="Search"]').type('test search{enter}');
        cy.get('.q-btn[icon="filter_alt_off"]').click();
        cy.get('input[aria-label="Search"]').should('have.value', '');
    });

    it('renders date filters correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('input[aria-label="Date from"]').click();
        cy.get('.q-date').should('be.visible');
        cy.get('input[aria-label="Date to"]').click();
        cy.get('.q-date').should('be.visible');
    });

    it('renders user filters correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('input[aria-label="User"]').click();
        cy.get('.q-menu').should('be.visible');
    });

    it('renders action filters correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.get('input[aria-label="Action"]').click();
        cy.get('.q-menu').should('be.visible');
    });

    it('renders log details correctly', () => {
        const model = 'testModel';
        const url = 'http://example.com/api/logs';
        mountComponent({ model, url });
        cy.intercept('GET', `${url}/*`, { fixture: 'logs.json' }).as('getLogs');
        cy.wait('@getLogs');
        cy.get('.logs .model-log').first().click();
        cy.get('.change-detail').should('be.visible');
    });
});