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 SignalList from './index';
import Sparkline from '../Sparkline';

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

	stories.add('SignalList', () => {
		const showSparkline = boolean('Show Sparkline', true);

		const signals = JSON.parse(`{
			"BacklogChangePercent": {
				"Label": "Backlog Change",
				"Description": "Percent change in number of open issues",
				"Format": "0,0%",
				"Positive": "low",
				"Glossary": true,
				"Tooltip": true
			},
			"Cost": {
				"Label": "Cost",
				"Description": "The labor cost of Contributor(s) for the selected time period",
				"Format": "$0,0[.]0a",
				"Positive": "low",
				"Glossary": true,
				"Tooltip": true
			},
			"IssuesCompleted": {
				"Label": "Completed Issues",
				"Description": "Issues closed with development work done",
				"Format": "0,0",
				"Positive": "high",
				"Glossary": true,
				"Tooltip": true
			}
		}`);

		let data = [
			{
				key: 'BacklogChangePercent',
				signal: signals.BacklogChangePercent,
				link: '/signal/backlog-change/team/all',
				value: 0.79,
				change: 0.64,
				sparkline: (
					<Sparkline.Line
						data={[32, 42, 11, 15, 79]}
						color="#99A4AC"
					/>
				)
			},
			{
				key: 'IssuesCompleted',
				signal: signals.IssuesCompleted,
				link: '/signal/issues-completed/team/all',
				value: 137,
				change: 4,
				sparkline: (
					<Sparkline.Line
						data={[98, 102, 121, 133, 137]}
						color="#99A4AC"
					/>
				)
			},
			{
				key: 'Cost',
				signal: signals.Cost,
				link: '/signal/cost/team/all',
				value: 29900000,
				change: 0,
				sparkline: (
					<Sparkline.Line
						data={[28000000, 28400000, 28400000, 29900000, 29900000]}
						color="#99A4AC"
					/>
				)
			}
		];

		if (!showSparkline) {
			data = data.map(row => Object.assign(row, { sparkline: null }));
		}

		const component = (
			<div style={{ width: '400px', background: '#FFF' }}>
				<SignalList
					title="Team Signals"
					signals={data}
				/>
			</div>
		);

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

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

		return component;
	});
};
