import '@testing-library/jest-dom';
import renderer from 'react-test-renderer';
import {render, screen} from '@testing-library/react';
import {ButtonComponent} from './button.component';
import {AppProviderComponent} from '../../../providers';
import React from 'react';

describe('Button Component', () => {
    describe('Render without crash and correctly', () => {
        it('Check', () => {
            render(
                <AppProviderComponent>
                    <ButtonComponent />
                </AppProviderComponent>,
            );
        });

        it('Snapshot', () => {
            const tree = renderer.create(
                <AppProviderComponent>
                    <ButtonComponent />
                </AppProviderComponent>,
            );
            expect(tree).toMatchSnapshot();
        });
    });

    describe('Prop `children` works correctly', () => {
        it('Check', () => {
            const children = 'Button';

            render(
                <AppProviderComponent>
                    <ButtonComponent role='button'>{children}</ButtonComponent>
                </AppProviderComponent>,
            );

            const button = screen.getByRole('button');
            expect(button).toHaveTextContent(children);
        });

        it('Snapshot', () => {
            const children = 'Button';

            const tree = renderer.create(
                <AppProviderComponent>
                    <ButtonComponent role='button'>{children}</ButtonComponent>
                </AppProviderComponent>,
            );

            expect(tree).toMatchSnapshot();
        });
    });

    describe('Loading', () => {
        describe('Default', () => {
            it('Check', () => {
                const children = 'Button';
                const loading = true;

                render(
                    <AppProviderComponent>
                        <ButtonComponent isLoading={loading} role='button'>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveTextContent('...');
            });

            it('Snapshot', () => {
                const children = 'Button';
                const loading = true;

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent isLoading={loading} role='button'>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('Custom', () => {
            it('Check', () => {
                const children = 'Button';
                const loading = true;
                const loadingContent = 'در حال بارگذاری...';

                render(
                    <AppProviderComponent>
                        <ButtonComponent
                            loadingContent={loadingContent}
                            isLoading={loading}
                            role='button'
                        >
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveTextContent(loadingContent);
            });

            it('Snapshot', () => {
                const children = 'Button';
                const loading = true;
                const loadingContent = 'در حال بارگذاری...';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent
                            loadingContent={loadingContent}
                            isLoading={loading}
                            role='button'
                        >
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });
    });

    describe('Sizes', () => {
        describe('sm', () => {
            it('Check', () => {
                const size = 'sm';
                const children = 'Button';

                render(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveStyle('font-size: 0.875rem');
                expect(button).toHaveStyle('font-weight: 500');
                expect(button).toHaveStyle('line-height: 1.25rem');
                expect(button).toHaveStyle('padding: 0.5rem 0.875rem');
                expect(button).toHaveStyle('border-radius: 0.5rem');
            });
            it('Snapshot', () => {
                const size = 'sm';
                const children = 'Button';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('md', () => {
            it('Check', () => {
                const size = 'md';
                const children = 'Button';

                render(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveStyle('font-size: 0.875rem');
                expect(button).toHaveStyle('font-weight: 500');
                expect(button).toHaveStyle('line-height: 1.25rem');
                expect(button).toHaveStyle('padding: 0.625rem 1rem');
                expect(button).toHaveStyle('border-radius: 0.5rem');
            });

            it('Snapshot', () => {
                const size = 'md';
                const children = 'Button';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('lg', () => {
            it('Check', () => {
                const size = 'lg';
                const children = 'Button';

                render(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveStyle('font-size: 1rem');
                expect(button).toHaveStyle('font-weight: 500');
                expect(button).toHaveStyle('line-height: 1.5rem');
                expect(button).toHaveStyle('padding: 0.625rem 1.125rem');
                expect(button).toHaveStyle('border-radius: 0.5rem');
            });

            it('Snapshot', () => {
                const size = 'lg';
                const children = 'Button';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('xl', () => {
            it('Check', () => {
                const size = 'xl';
                const children = 'Button';

                render(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                const button = screen.getByRole('button');
                expect(button).toHaveStyle('font-size: 1rem');
                expect(button).toHaveStyle('font-weight: 500');
                expect(button).toHaveStyle('line-height: 1.5rem');
                expect(button).toHaveStyle('border-radius: 0.5rem');
                expect(button).toHaveStyle('padding: 0.75rem 1.25rem');
            });
            it('Snapshot', () => {
                const size = 'xl';
                const children = 'Button';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <ButtonComponent role='button' size={size}>
                            {children}
                        </ButtonComponent>
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });
    });
});