import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Text } from './index';

afterEach(cleanup);

test('should take a snapshot', () => {
	const { asFragment } = render(<Text size="span" />);

	expect(asFragment()).toMatchSnapshot();
});

describe('tests the box with and without children', () => {
	test('renders a Box with no children', () => {
		const { getByTestId } = render(<Text testId="text-id" size="span" />);
		expect(getByTestId('text-id')).toBeInTheDocument();
		expect(getByTestId('text-id')).toBeEmptyDOMElement();
	});

	test('renders a Box with children', () => {
		const { getByTestId } = render(
			<Text testId="text-id" size="span">
				<span data-testid="child-id" />
			</Text>
		);
		expect(getByTestId('text-id')).toBeInTheDocument();
		expect(getByTestId('text-id')).toContainElement(getByTestId('child-id'));
	});
});

describe('tests the different elements for Text', () => {
	test('renders all of the elements', () => {
		const { getByTestId } = render(
			<>
				<Text testId="undefined-id">Undefined Test</Text>
				<Text testId="small-id" size="small">
					Small Test
				</Text>
				<Text testId="span-id" size="span">
					Span Test
				</Text>
				<Text testId="p-id" size="p">
					P Test
				</Text>
				<Text testId="h6-id" size="h6">
					H6 Test
				</Text>
				<Text testId="h5-id" size="h5">
					H5 Test
				</Text>
				<Text testId="h4-id" size="h4">
					H4 Test
				</Text>
				<Text testId="h3-id" size="h3">
					H3 Test
				</Text>
				<Text testId="h2-id" size="h2">
					H2 Test
				</Text>
				<Text testId="h1-id" size="h1">
					H1 Test
				</Text>
			</>
		);
		expect(getByTestId('undefined-id')).toBeInTheDocument();
		expect(getByTestId('undefined-id')).toHaveTextContent('Undefined Test');
		expect(getByTestId('undefined-id').tagName).toBe('SPAN');
		expect(getByTestId('undefined-id')).toHaveStyle({
			'font-size': '0.8rem',
		});

		expect(getByTestId('small-id')).toBeInTheDocument();
		expect(getByTestId('small-id')).toHaveTextContent('Small Test');
		expect(getByTestId('small-id').tagName).toBe('SMALL');
		expect(getByTestId('small-id')).toHaveStyle({
			'font-size': '0.64rem',
		});

		expect(getByTestId('span-id')).toBeInTheDocument();
		expect(getByTestId('span-id')).toHaveTextContent('Span Test');
		expect(getByTestId('span-id').tagName).toBe('SPAN');
		expect(getByTestId('span-id')).toHaveStyle({
			'font-size': '0.8rem',
		});

		expect(getByTestId('p-id')).toBeInTheDocument();
		expect(getByTestId('p-id')).toHaveTextContent('P Test');
		expect(getByTestId('p-id').tagName).toBe('P');
		expect(getByTestId('p-id')).toHaveStyle({
			'font-size': '1rem',
		});

		expect(getByTestId('h6-id')).toBeInTheDocument();
		expect(getByTestId('h6-id')).toHaveTextContent('H6 Test');
		expect(getByTestId('h6-id').tagName).toBe('H6');
		expect(getByTestId('h6-id')).toHaveStyle({
			'font-size': '1rem',
		});

		expect(getByTestId('h5-id')).toBeInTheDocument();
		expect(getByTestId('h5-id')).toHaveTextContent('H5 Test');
		expect(getByTestId('h5-id').tagName).toBe('H5');
		expect(getByTestId('h5-id')).toHaveStyle({
			'font-size': '1.25rem',
		});

		expect(getByTestId('h4-id')).toBeInTheDocument();
		expect(getByTestId('h4-id')).toHaveTextContent('H4 Test');
		expect(getByTestId('h4-id').tagName).toBe('H4');
		expect(getByTestId('h4-id')).toHaveStyle({
			'font-size': '1.6rem',
		});

		expect(getByTestId('h3-id')).toBeInTheDocument();
		expect(getByTestId('h3-id')).toHaveTextContent('H3 Test');
		expect(getByTestId('h3-id').tagName).toBe('H3');
		expect(getByTestId('h3-id')).toHaveStyle({
			'font-size': '2rem',
		});

		expect(getByTestId('h2-id')).toBeInTheDocument();
		expect(getByTestId('h2-id')).toHaveTextContent('H2 Test');
		expect(getByTestId('h2-id').tagName).toBe('H2');
		expect(getByTestId('h2-id')).toHaveStyle({
			'font-size': '2.4rem',
		});

		expect(getByTestId('h1-id')).toBeInTheDocument();
		expect(getByTestId('h1-id')).toHaveTextContent('H1 Test');
		expect(getByTestId('h1-id').tagName).toBe('H1');
		expect(getByTestId('h1-id')).toHaveStyle({
			'font-size': '3rem',
		});
	});
});

describe('tests the weight prop for Text', () => {
	test('renders all of the elements with varying weights', () => {
		const { getByTestId } = render(
			<>
				<Text weight="900" testId="undefined-id">
					Undefined Test
				</Text>
				<Text weight="800" testId="small-id" size="small">
					Small Test
				</Text>
				<Text weight="700" testId="span-id" size="span">
					Span Test
				</Text>
				<Text weight="600" testId="p-id" size="p">
					P Test
				</Text>
				<Text weight="500" testId="h6-id" size="h6">
					H6 Test
				</Text>
				<Text weight="400" testId="h5-id" size="h5">
					H5 Test
				</Text>
				<Text weight="300" testId="h4-id" size="h4">
					H4 Test
				</Text>
				<Text weight="200" testId="h3-id" size="h3">
					H3 Test
				</Text>
				<Text weight="100" testId="h2-id" size="h2">
					H2 Test
				</Text>
				<Text weight="bold" testId="h1-id" size="h1">
					H1 Test
				</Text>
			</>
		);
		expect(getByTestId('undefined-id')).toHaveStyle({
			'font-weight': 900,
		});

		expect(getByTestId('small-id')).toHaveStyle({
			'font-weight': 800,
		});

		expect(getByTestId('span-id')).toHaveStyle({
			'font-weight': 700,
		});

		expect(getByTestId('p-id')).toHaveStyle({
			'font-weight': 600,
		});

		expect(getByTestId('h6-id')).toHaveStyle({
			'font-weight': 500,
		});

		expect(getByTestId('h5-id')).toHaveStyle({
			'font-weight': 400,
		});

		expect(getByTestId('h4-id')).toHaveStyle({
			'font-weight': 300,
		});

		expect(getByTestId('h3-id')).toHaveStyle({
			'font-weight': 200,
		});

		expect(getByTestId('h2-id')).toHaveStyle({
			'font-weight': 100,
		});

		expect(getByTestId('h1-id')).toHaveStyle({
			'font-weight': 'bold',
		});
	});
});
describe('tests the underlined prop for Text', () => {
	test('renders all of the elements with an underline', () => {
		const { getByTestId } = render(
			<>
				<Text underlined testId="undefined-id">
					Undefined Test
				</Text>
				<Text underlined testId="small-id" size="small">
					Small Test
				</Text>
				<Text underlined testId="span-id" size="span">
					Span Test
				</Text>
				<Text underlined testId="p-id" size="p">
					P Test
				</Text>
				<Text underlined testId="h6-id" size="h6">
					H6 Test
				</Text>
				<Text underlined testId="h5-id" size="h5">
					H5 Test
				</Text>
				<Text underlined testId="h4-id" size="h4">
					H4 Test
				</Text>
				<Text underlined testId="h3-id" size="h3">
					H3 Test
				</Text>
				<Text underlined testId="h2-id" size="h2">
					H2 Test
				</Text>
				<Text underlined testId="h1-id" size="h1">
					H1 Test
				</Text>
			</>
		);
		expect(getByTestId('undefined-id')).toHaveStyle({
			'text-decoration': 'underline',
			'text-decoration-color': '#cccccc',
		});

		expect(getByTestId('small-id')).toHaveStyle({
			'text-decoration': 'underline',
			'text-decoration-color': '#cccccc',
		});

		expect(getByTestId('span-id')).toHaveStyle({
			'text-decoration': 'underline',
			'text-decoration-color': '#cccccc',
		});

		expect(getByTestId('p-id')).toHaveStyle({
			'text-decoration': 'underline',
			'text-decoration-color': '#cccccc',
		});

		expect(getByTestId('h6-id')).toHaveStyle({
			'border-bottom': '1px solid #cccccc',
		});

		expect(getByTestId('h5-id')).toHaveStyle({
			'border-bottom': '1px solid #cccccc',
		});

		expect(getByTestId('h4-id')).toHaveStyle({
			'border-bottom': '2px solid #cccccc',
		});

		expect(getByTestId('h3-id')).toHaveStyle({
			'border-bottom': '2px solid #cccccc',
		});

		expect(getByTestId('h2-id')).toHaveStyle({
			'border-bottom': '3px solid #cccccc',
		});

		expect(getByTestId('h1-id')).toHaveStyle({
			'border-bottom': '3px solid #cccccc',
		});
	});
});

describe('tests the italic prop', () => {
	test('', () => {
		const { getByTestId } = render(
			<Text italic size="span" testId="text-id">
				Testerino
			</Text>
		);
		expect(getByTestId('text-id')).toBeInTheDocument();
		expect(getByTestId('text-id')).toHaveStyle({
			'font-style': 'italic',
		});
	});
});

describe('tests the block prop', () => {
	test('', () => {
		const { getByTestId } = render(
			<Text block size="span" testId="text-id">
				Testerino
			</Text>
		);
		expect(getByTestId('text-id')).toBeInTheDocument();
		expect(getByTestId('text-id')).toHaveStyle({
			display: 'block',
			'margin-bottom': '0.5rem',
			'margin-top': '0.5rem',
		});
	});
});