import * as React from 'react';
import render from '../../_utils/tests/render';
import Tabs from '../Tabs';

it('renders correctly for basic tabs', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <Tabs>
          <Tabs.Tab tab="dogs" {...tabs}>
            Dogs
          </Tabs.Tab>
          <Tabs.Tab tab="cats" {...tabs}>
            Cats
          </Tabs.Tab>
          <Tabs.Tab tab="parrots" {...tabs}>
            Parrots
          </Tabs.Tab>
        </Tabs>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for an active tab', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <Tabs>
          <Tabs.Tab tab="dogs" isActive {...tabs}>
            Dogs
          </Tabs.Tab>
          <Tabs.Tab tab="cats" {...tabs}>
            Cats
          </Tabs.Tab>
          <Tabs.Tab tab="parrots" {...tabs}>
            Parrots
          </Tabs.Tab>
        </Tabs>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for tabs with content', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <div>
          <Tabs>
            <Tabs.Tab tab="dogs" {...tabs}>
              Dogs
            </Tabs.Tab>
            <Tabs.Tab tab="cats" {...tabs}>
              Cats
            </Tabs.Tab>
          </Tabs>
          <Tabs.Panel tab="dogs" padding="major-3" {...tabs}>
            Dogs are awesome
          </Tabs.Panel>
          <Tabs.Panel tab="cats" padding="major-3" {...tabs}>
            Cats are meh
          </Tabs.Panel>
        </div>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for fitted tabs', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <div>
          <Tabs isFitted>
            <Tabs.Tab tab="dogs" {...tabs}>
              Dogs
            </Tabs.Tab>
            <Tabs.Tab tab="cats" {...tabs}>
              Cats
            </Tabs.Tab>
          </Tabs>
        </div>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for center aligned tabs', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <div>
          <Tabs align="center">
            <Tabs.Tab tab="dogs" {...tabs}>
              Dogs
            </Tabs.Tab>
            <Tabs.Tab tab="cats" {...tabs}>
              Cats
            </Tabs.Tab>
          </Tabs>
        </div>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for right aligned tabs', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <div>
          <Tabs align="right">
            <Tabs.Tab tab="dogs" {...tabs}>
              Dogs
            </Tabs.Tab>
            <Tabs.Tab tab="cats" {...tabs}>
              Cats
            </Tabs.Tab>
          </Tabs>
        </div>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});

it('renders correctly for boxed tabs', () => {
  const { container } = render(
    <Tabs.Container>
      {tabs => (
        <div>
          <Tabs type="boxed">
            <Tabs.Tab tab="dogs" {...tabs}>
              Dogs
            </Tabs.Tab>
            <Tabs.Tab tab="cats" {...tabs}>
              Cats
            </Tabs.Tab>
          </Tabs>
        </div>
      )}
    </Tabs.Container>
  );
  expect(container.firstChild).toMatchSnapshot();
});