import { mount } from '@vue/test-utils';
import listCard from '@/ux-components/list-card/list-card.vue';

describe('list-card.vue', () => {
    it('Should return input type checkbox if isMultiSelect is true', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isMultiSelect: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'checkbox-demo-1',
                groupName: 'Checkbox 1',
                buttonImage: 'windshield-damage.svg',
                value: 'test value'
            }
        });

        // Assert
        const input = wrapper.find('input');
        expect(input.attributes().type).toEqual('checkbox');
    });

    it('Should return primary label text', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                value: 'test value'
            }
        });

        // Assert
        const paragraph = wrapper.find('p');
        expect(paragraph.text()).toEqual('Windshield');
    });

    it('Should return secondary (sub) label text', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                buttonLabelSubCopy: 'Test',
                value: 'test value'
            }
        });

        // Assert
        const paragraph = wrapper.find('p:nth-of-type(2)');
        expect(paragraph.text()).toEqual('Test');
    });

    it('Should return input group name used for radio or checkbox', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                buttonLabelSubCopy: 'Test',
                value: 'test value'
            }
        });

        // Assert
        const input = wrapper.find('input');
        expect(input.attributes().name).toEqual('radio 1');
    });

    it('Should return aria-required state', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                isRequired: true,
                value: 'test value'
            }
        });

        // Assert
        const input = wrapper.find('input');
        expect(input.attributes()['aria-required']).toEqual('true');
    });

    it('Should return flex row classes if isWide is true', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                isRequired: true,
                isWide: true,
                buttonLabelSubCopy: '',
                value: 'test value'
            }
        });

        // Assert
        const label = wrapper.find('.list-card-content');
        expect(label.exists()).toBe(true);
        const { labelClasses } = wrapper.vm;
        expect(labelClasses).toContain('flex-row');
        expect(label.classes()).toContain('flex-row');
    });

    it('Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                isRequired: true,
                isWide: true,
                buttonLabelSubCopy: 'Button Subcopy',
                value: 'test value'
            }
        });

        // Assert
        const label = wrapper.find('.list-card-content');
        expect(label.exists()).toBe(true);
        const { labelClasses } = wrapper.vm;
        expect(labelClasses).toContain('flex-row');
        expect(label.classes()).toContain('flex-row');
        expect(labelClasses).toContain('checkboxTop');
        expect(label.classes()).toContain('checkboxTop');
    });

    it('Should return flex column classes if isWide is false', () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                isRequired: true,
                isWide: false,
                value: 'test value'
            }
        });

        // Assert
        const label = wrapper.find('.list-card-content');
        expect(label.exists()).toBe(true);
        const { labelClasses } = wrapper.vm;
        expect(labelClasses).toContain('flex-column');
        expect(label.classes()).toContain('flex-column');
    });
});