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

import Sidebar from './sidebar';

storiesOf('Composites|Sidebar', module)
  .add('Sidebar', () => (
    <Sidebar
      logo="https://quotes.coverwallet.biz/images/coverwallet.svg"
      onSelect={action('click')}
      options={[
        {
          icon: 'business-info',
          label: 'BUSINESS INFO',
        },
        { icon: 'quotes', label: 'QUOTES' },
        {
          icon: 'third-party-insurance',
          label: 'THIRD PARTY INSURANCE',
        },
      ]}
      agentInfo={{
        picture: 'https://quotes.coverwallet.biz/images/peter.png',
        name: 'Peter Smith',
        subtitle: 'Your Free Personal Advisor',
        phone: '(646) 760-8440',
        email: 'psmith@cwtest.com',
      }}
    />
  ))
  .add('Option Preselected', () => (
    <Sidebar
      logo="https://quotes.coverwallet.biz/images/coverwallet.svg"
      selectedOption="QUOTES"
      onSelect={action('click')}
      options={[
        {
          icon: 'business-info',
          label: 'BUSINESS INFO',
        },
        { icon: 'quotes', label: 'QUOTES' },
        {
          icon: 'third-party-insurance',
          label: 'THIRD PARTY INSURANCE',
        },
      ]}
      agentInfo={{
        picture: 'https://quotes.coverwallet.biz/images/peter.png',
        name: 'Peter Smith',
        subtitle: 'Your Free Personal Advisor',
        phone: '(646) 760-8440',
        email: 'psmith@cwtest.com',
      }}
    />
  ))
  .add('with Count', () => (
    <Sidebar
      logo="https://quotes.coverwallet.biz/images/coverwallet.svg"
      onSelect={action('click')}
      options={[
        {
          icon: 'business-info',
          label: 'BUSINESS INFO',
        },
        { icon: 'quotes', label: 'QUOTES', count: 3 },
        {
          icon: 'third-party-insurance',
          label: 'THIRD PARTY INSURANCE',
        },
      ]}
      agentInfo={{
        picture: 'https://quotes.coverwallet.biz/images/peter.png',
        name: 'Peter Smith',
        subtitle: 'Your Free Personal Advisor',
        phone: '(646) 760-8440',
        email: 'psmith@cwtest.com',
      }}
    />
  ))
  .add('without Agent', () => (
    <Sidebar
      logo="https://quotes.coverwallet.biz/images/coverwallet.svg"
      onSelect={action('click')}
      options={[
        {
          icon: 'business-info',
          label: 'BUSINESS INFO',
        },
        { icon: 'quotes', label: 'QUOTES' },
        {
          icon: 'third-party-insurance',
          label: 'THIRD PARTY INSURANCE',
        },
      ]}
    />
  ));
