import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import CardTable from './cardTable';

storiesOf('Composites|Card Table/Card', module)
  .add('Simple text', () => (
    <CardTable
      sections={[{ label: 'Title', type: 'text' }]}
      cards={[{ text: 'Text content' }]}
    />
  ))
  .add('With Status', () => (
    <CardTable
      sections={[{ label: 'Title', type: 'text' }]}
      cards={[
        { text: 'Text content', status: { type: 'success', label: 'Active' } },
      ]}
    />
  ))
  .add('Multiple children', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child3: 'Child 3 value',
        },
      ]}
    />
  ))
  .add('Gapping children', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
        { label: 'CHILD 4', type: 'child4' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child4: 'Child 4 value',
        },
      ]}
    />
  ))
  .add('With 2 Actions', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child3: 'Child 3 value',
          actions: [
            {
              label: 'Main Action',
              onClick: action('click on Main Action'),
            },
            {
              label: 'Action 2',
              onClick: action('click on Action 2'),
            },
          ],
        },
      ]}
    />
  ))
  .add('With 3 Actions', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child3: 'Child 3 value',
          actions: [
            {
              label: 'Main Action',
              onClick: action('click on Main Action'),
            },
            {
              label: 'Action 2',
              onClick: action('click on Action 2'),
            },
            {
              label: 'Action 3',
              onClick: action('click on Action 3'),
            },
          ],
        },
      ]}
    />
  ))
  .add('With 4 Actions', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child3: 'Child 3 value',
          actions: [
            {
              label: 'Main Action',
              onClick: action('click on Main Action'),
            },
            {
              label: 'Action 2',
              onClick: action('click on Action 2'),
            },
            {
              label: 'Action 3',
              onClick: action('click on Action 3'),
            },
            {
              label: 'Action 4',
              onClick: action('click on Action 4'),
            },
          ],
        },
      ]}
    />
  ))
  .add('With more than 4 Actions', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          child3: 'Child 3 value',
          actions: [
            {
              label: 'Main Action',
              onClick: action('click on Main Action'),
            },
            {
              label: 'Action 2',
              onClick: action('click on Action 2'),
            },
            {
              label: 'Action 3',
              onClick: action('click on Action 3'),
            },
            {
              label: 'Action 4',
              onClick: action('click on Action 4'),
            },
            {
              label: 'Action 5',
              onClick: action('click on Action 5'),
            },
            {
              label: 'Action 6',
              onClick: action('click on Action 6'),
            },
          ],
        },
      ]}
    />
  ));

  storiesOf('Composites|Card Table/Cards', module)
  .add('With different actions', () => (
    <CardTable
      sections={[
        { label: 'CHILD 1', type: 'child1' },
        { label: 'CHILD 2', type: 'child2' },
        { label: 'CHILD 3', type: 'child3' },
      ]}
      cards={[
        {
          child1: 'Child 1 value',
          child2: 'Child 2 value',
          actions: [
            {
              label: 'Main Common Action',
              onClick: action('click on Main Common Action'),
            },
            {
              label: 'Action for card 1',
              onClick: action('click on Action for card 1'),
            },
          ],
        }, {
          child1: 'Child 1 value',
          child3: 'Child 3 value',
          actions: [
            {
              label: 'Main Common Action',
              onClick: action('click on Main Common Action'),
            },
            {
              label: 'Action for card 2',
              onClick: action('click on Action for card 2'),
            },
          ],
        }
      ]}
    />
  ));
