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

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

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

		let percent = 78;

		if (type === 'percent') {
			percent = number('Percentage', 78, {
				range: true,
				min: 0,
				max: 100,
				step: 1
			});
		}

		const component = (
			<div style={{ padding: 40, background: '#FFF' }}>
				{
					type === 'percent' ? (
						<Progress
							percent={(percent / 100)}
						/>
					) : (
						<Progress
							total={50}
							value={17}
						/>
					)
				}
			</div>
		);

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

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

		return component;
	});
};
