import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';

import { Tabs } from '../src';


storiesOf('Tabs', module)
  .add('Default', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']}>
      <Tabs.Panel fromHeader='HTML' >
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
  .add('center', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']} center>
      <Tabs.Panel fromHeader='HTML'>
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
  .add('withoutBorder', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']} withoutBorder>
      <Tabs.Panel fromHeader='HTML'>
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
  .add('withoutBorder & center', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']} withoutBorder center>
      <Tabs.Panel fromHeader='HTML'>
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
  .add('with css Prop', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']} withoutBorder center css={`background-color: red;`}>
      <Tabs.Panel fromHeader='HTML'>
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
  .add('with intermediateComponent', () => (
    <Tabs headers={['HTML', 'CSS', 'React', 'Angular']} withoutBorder center itemIntermediateComponent={(
      <div>
        <p>TESTE</p>
        <h3>asdasdasdasd</h3>
      </div>
    )}>
      <Tabs.Panel fromHeader='HTML'>
        <h1>HTML</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='CSS'>
        <h1>CSS</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='React'>
        <h1>REACT</h1>
      </Tabs.Panel>
      <Tabs.Panel fromHeader='Angular'>
        <h1>Angular</h1>
      </Tabs.Panel>
    </Tabs>
  ))
;