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

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

	stories.add('ChangePill', () => {
		const hasValue = boolean('Has Value', true);
		const format = select('Format', { Percent: '0,0%', Integer: '0,0' }, '0,0%');
		const positive = select('Positive', { High: 'high', Low: 'low' }, 'low');

		const component = (
			<div style={{ width: 80, margin: 20 }}>
				<ChangePill
					value={hasValue ? (format.includes('%') ? 0.64 : 12) : 0}
					format={format}
					positive={positive}
				/>
			</div>
		);

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

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

		return component;
	});
};
