import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { checkA11y } from 'storybook-addon-a11y';
import NavSidebar from './NavSidebar';
import Item from './Item';

const twitterProfile = {
  id: '1',
  service: 'twitter',
  supportedTabs: ['overview', 'posts', 'answers'],
};

const facebookProfile = {
  id: '3',
  service: 'facebook',
  supportedTabs: ['overview', 'posts', 'audience', 'answers'],
};

const instagramProfile = {
  id: '4',
  service: 'instagram',
  supportedTabs: ['overview', 'posts', 'audience', 'answers'],
};

const channels = [
  twitterProfile,
  facebookProfile,
  instagramProfile,
];

function mockStore(state = {
  navSidebar: { channels },
  profiles: { profiles: channels },
}) {
  return {
    getState() { return state; },
    subscribe() {},
  };
}

storiesOf('NavSidebar')
  .addDecorator(checkA11y)
  .add('should show nav sidebar with Home as active link', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
      />
    </div>
  ))
  .add('should always show all 4 channels', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore({ profiles: {}, navSidebar: { channels: [] } })}
        route="/"
        onClick={action('click item')}
      />
    </div>
  ))
  .add('displays trial status if user is on trial', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        onTrial
        daysRemaining={'in 7 days'}
      />
    </div>
  ))
  .add('trial status for 1 day remaining', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        onTrial
        daysRemaining={'in a day'}
      />
    </div>
  ))
  .add('trial ends today', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        channels={channels}
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        onTrial
        daysRemaining={'today'}
      />
    </div>
  ))
  .add('Trial status should have a link to org admin if viewed by the account owner', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        onTrial
        isOwner
        organizationId="organization123"
        daysRemaining={0}
      />
    </div>
  ))
  .add('Should display a link to Settings if viewed by the account owner', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        isOwner
        organizationId="organization123"
      />
    </div>
  ))
  .add('Should not display a link to Settings if viewed by regular user', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore()}
        route="/"
        onClick={action('click item')}
        organizationId="organization123"
      />
    </div>
  ));

storiesOf('Channels')
  .addDecorator(checkA11y)
  .add('should show all channels', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore({ profiles: {}, navSidebar: { channels: [facebookProfile] } })}
        route="/"
        onClick={action('click item')}
      />
    </div>
  ))
  .add('Channels href should default to the first tab if the current one is not supported by the channel', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore({ profiles: {}, navSidebar: { channels: [twitterProfile] } })}
        route="/facebook/audience/foo123"
        onClick={action('click item')}
      />
    </div>
  ))
  .add('if the channel is not available, it should route to connect page', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <NavSidebar
        store={mockStore({ profiles: {}, navSidebar: { channels: [twitterProfile] } })}
        route="/connect/shopify"
        onClick={action('click item')}
      />
    </div>
  ));

storiesOf('Item')
  .addDecorator(checkA11y)
  .add('normal state', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <Item
        href="/"
        route="/another-route"
        onClick={action('click item')}
      >Dashboard</Item>
    </div>
  ))
  .add('active state', () => (
    <div style={{ width: '260px', height: '100%', display: 'flex' }}>
      <Item
        href="/"
        route="/"
        onClick={action('click item')}
      >Dashboard</Item>
    </div>
  ));