import React from 'react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { describe, it, specs } from '../../storybook/facade';
import NavBar from './index';
import Message from '../Message';

export default (stories) => {
	stories.addDecorator(withKnobs);

	const menu = [
		{
			title: 'Teams',
			icon: 'users',
			active: true,
			menu: [
				{
					title: 'Summary',
					menu: [
						{
							title: 'Performance',
							key: 'TeamPerformance'
						}
					]
				},
				{
					title: 'Signals',
					menu: [
						{
							title: 'Backlog Change',
							description: 'Percent change in number of open issues',
							key: '',
							active: true
						},
						{
							title: 'Completed Issues',
							description: 'Issues closed with development work done',
							key: ''
						},
						{
							title: 'Cost',
							description: 'The labor cost of Contributor(s) for the selected time period',
							key: ''
						},
						{
							title: 'Cycle Time',
							description: 'Average number of days required to close an issue',
							key: ''
						},
						{
							title: 'Defect Density',
							description: 'Number of open defects per thousand lines of code (KLOC)',
							key: ''
						},
						{
							title: 'Defect Rate',
							description: 'Percent of completed issues that were defects',
							key: ''
						},
						{
							title: 'Delivered vs. Planned',
							description: 'Percent of issues planned for a sprint that were completed in that sprint.',
							key: ''
						},
						{
							title: 'Innovation Rate',
							description: 'Issues completed for new features (vs. maintenance, etc.)',
							key: ''
						},
						{
							title: 'On-time Delivery',
							description: 'Average days late for completed issues',
							key: ''
						},
						{
							title: 'Planned Issues',
							description: 'Issues completed that were scheduled (vs. unplanned)',
							key: ''
						},
						{
							title: 'Rework Rate',
							description: 'Percent of issues with more than one in-work state',
							key: ''
						},
						{
							title: 'Sprint Health',
							description: 'Combines multiple sprint efficiency measures into a single signal',
							key: ''
						},
						{
							title: 'Sprint Volatility',
							description: 'Percent of issue churn (additions or deletions) after sprint start',
							key: ''
						},
						{
							title: 'Strategic Issues',
							description: 'Percent of work completed on issues deemed strategic by the company',
							key: ''
						},
						{
							title: 'Throughput',
							description: 'Number of issues completed per person, per month',
							key: ''
						}
					]
				},
				{
					title: 'Data',
					menu: [
						{
							title: 'Teams',
							key: ''
						}
					]
				}
			]
		},
		{
			title: 'People',
			icon: 'user',
			menu: [
				{
					title: 'Summary',
					menu: [
						{
							title: 'Performance',
							key: ''
						}
					]
				}
			]
		},
		{
			title: 'Work',
			icon: 'route',
			menu: [
				{
					title: 'Summary',
					menu: [
						{
							title: 'Performance',
							key: ''
						}
					]
				}
			]
		}
	];

	const menuAdmin = [
		{
			title: 'People',
			description: 'Manage your users',
			key: '/admin/people'
		},
		{
			title: 'Roles',
			description: 'Create and manage roles',
			key: '/admin/roles'
		},
		{
			title: 'Cost Centers',
			description: 'Create and manage cost centers',
			key: '/admin/cost-center'
		},
		{
			title: 'Team Mapping',
			description: 'Associate projects and code repositories with teams',
			key: '/admin/team-mapping'
		}
	];

	stories.add('Navbar', () => {
		const showMessage = boolean('Show Message', false);

		const component = (
			<>
				<NavBar
					menu={menu}
					admin={menuAdmin}
					avatarUrl="http://www.mattcongrove.com/avatar.jpg"
					onSignout={() => { window.location = `https://${window.document.location.host}/signout`; }}
					onClick={(e, { value }) => {
						console.log(`Navigating to ${value}`);
					}}
				/>
				{
					showMessage && (
						<Message
							content="This page is in beta and may not yet be available to others in your organization"
							type="warning"
						/>
					)
				}
			</>
		);

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

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

		return component;
	});
};
