import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import {
	Icon as SemanticIcon
} from 'semantic-ui-react';
import { describe, it, specs } from '../../storybook/facade';
import Tabs from './index';

export default (stories) => {
	stories.add('Tabs', () => {
		const leftPanes = [
			{
				title: 'Active',
				count: '28',
				pane: (
					<>
						This is the tab for active content
					</>
				)
			},
			{
				title: 'Inactive',
				count: '3',
				pane: (
					<>
						This is the tab for inactive content
					</>
				)
			}
		];

		const rightPane = {
			title: (
				<>
					Download
					<SemanticIcon
						name="cloud download"
					/>
				</>
			),
			pane: (
				<>
					This tab shows download instructions
				</>
			)
		};

		const component = (
			<div style={{ background: '#FFF' }}>
				<Tabs
					panes={leftPanes}
					rightPane={rightPane}
					onTabChange={(e, index) => {
						console.log(`Showing tab ${index}`);
					}}
				/>
			</div>
		);

		specs(() => describe('Tabs', () => {
			const wrapper = mount(component);

			it('Should be ok', () => {
				expect(wrapper).be.ok;
			});
		}));

		return component;
	});
};
