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

import CardTable from './cardTable';
import CardItem from './cardItems/cardItem';
import LobItem from './cardItems/templates/lobItem';
import AgentItem from './cardItems/templates/agentItem';
import LastActivityItem from './cardItems/templates/lastActivityItem';

const cardActions = [
  {
    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'),
  },
];

const cards = [
  {
    insuranceType: 'Busiess Owner Policy (BOP)',
    industry: 'Food and Accomodation',
    agent: {
      name: 'Gabe McNaughton',
      phone: '(646) 760-8440',
      email: 'gabemcn@coverwallet.com',
    },
    lastActivity: 'Jun 9, 2019',
    status: {
      type: 'success',
      label: 'Active',
    },
    actions: cardActions,
  },
  {
    insuranceType: 'Busiess Owner Policy (BOP)',
    agent: {
      name: 'Gabe McNaughton',
      phone: '(646) 760-8440',
      email: 'gabemcn@coverwallet.com',
    },
    lastActivity: 'Jun 9, 2019',
    status: {
      type: 'warning',
      label: 'Legit Lead',
    },
    actions: cardActions,
  },
  {
    insuranceType: 'Busiess Owner Policy (BOP)',
    industry: 'Food and Accomodation',
    lastActivity: 'Jun 9, 2019',
    status: {
      type: 'info',
      label: 'Contact Later',
    },
    actions: cardActions,
  },
];

storiesOf('Composites|Card Table', module).add('Cards for Accounts', () => {
  CardItem.addTemplates({
    insuranceType: LobItem,
    agent: AgentItem,
    lastActivity: LastActivityItem,
  });

  return (
    <CardTable
      sections={[
        { label: 'INSURANCE TYPE', type: 'insuranceType' },
        { label: 'INDUSTRY', type: 'industry' },
        { label: 'AGENT', type: 'agent' },
        { label: 'LAST ACTIVITY', type: 'lastActivity' },
      ]}
      cards={cards}
    />
  );
});
