import * as React from 'react';
import render from '../../_utils/tests/render';
import Input from '../Input';
import InputField from '../InputField';
import { Size } from '../../types';

it('renders correctly for a basic input field', () => {
  const { container } = render(<InputField />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an input field with a placeholder', () => {
  const { container } = render(<InputField placeholder="Awesome placeholder" />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for a disabled input field', () => {
  const { container } = render(<InputField disabled />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an input field with a default value', () => {
  const { container } = render(<InputField defaultValue="Awesome value" />);
  expect(container.firstChild).toMatchSnapshot();
});

describe('types', () => {
  ['number', 'tel', 'date', 'email', 'password', 'search', 'time', 'url'].forEach(type => {
    it(`renders correctly for an input field with type ${type}`, () => {
      const { container } = render(<InputField type={type} />);
      expect(container.firstChild).toMatchSnapshot();
    });
  });
});

describe('sizes', () => {
  ['small', 'medium', 'large'].forEach(size => {
    it(`renders correctly for an input field with size ${size}`, () => {
      const { container } = render(<InputField size={size as Size} />);
      expect(container.firstChild).toMatchSnapshot();
    });
  });
});

describe('states', () => {
  ['danger', 'success', 'warning', 'primary'].forEach(state => {
    it(`renders correctly for an input field with state ${state}`, () => {
      const { container } = render(<InputField state={state} />);
      expect(container.firstChild).toMatchSnapshot();
    });
  });
});

it('renders correctly for an input field with a description', () => {
  const { container } = render(
    <InputField a11yId="username" label="Username" description="Required for your fannypack" />
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an input field with a hint', () => {
  const { container } = render(<InputField a11yId="username" label="Username" hint="Must be awesome" />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an optional input field', () => {
  const { container } = render(<InputField a11yId="username" label="Username" isOptional />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for a required field', () => {
  const { container } = render(<InputField a11yId="username" label="Username" isRequired />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for addon component (before)', () => {
  const { container } = render(<InputField a11yId="username" label="Username" addonBefore={<div>test</div>} />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for addon component (after)', () => {
  const { container } = render(<InputField a11yId="username" label="Username" addonAfter={<div>test</div>} />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for addon component (vertical)', () => {
  const { container } = render(
    <InputField a11yId="username" label="Username" addonAfter={<div>test</div>} isVertical />
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an input with a before component', () => {
  const { container } = render(<InputField before={<Input.Icon a11yLabel="Search" icon="info-circle" />} />);
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an input with a after component', () => {
  const { container } = render(<InputField after={<Input.Icon a11yLabel="Search" icon="info-circle" />} />);
  expect(container.firstChild).toMatchSnapshot();
});