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

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

	stories.add('Metric', () => {
		const type = select('Metric Type', {
			Percentile: 'percentile',
			Value: 'value'
		}, 'percentile');

		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
			}
		}`);

		const component = (
			<div style={{ width: 300, background: '#FFF' }}>
				{
					type === 'percentile' ? (
						<Metric.Percentile
							title="Performance Rank"
							value={12}
							change={-43}
						/>
					) : (
						<Metric.Value
							signal={signals.BacklogChangePercent}
							title="Period Value"
							value={0.242}
							change={0.19}
							subheading="Starting backlog was 269. 238 new issues were created and 173 issues were closed."
						/>
					)
				}
			</div>
		);

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

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

		return component;
	});
};
