import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import {
	Icon as SemanticIcon
} from 'semantic-ui-react';
import { describe, it, specs } from '../../storybook/facade';
import FilterSimple from './index';

export default (stories) => {
	stories.add('FilterSimple', () => {
		const locations = [
			{
				text: 'Country',
				options: [
					{
						text: 'United States',
						value: 'country-us'
					}
				]
			},
			{
				text: 'City',
				options: [
					{
						text: 'Austin',
						value: 'city-austin'
					},
					{
						text: 'Raleigh',
						value: 'city-raleigh'
					}
				]
			}
		];

		const people = [
			{
				text: 'Bowley, Chris',
				value: 'chris-bowley'
			},
			{
				text: 'Congrove, Matthew',
				value: 'matthew-congrove'
			},
			{
				text: 'Haynie, Jeff',
				value: 'jeff-haynie'
			},
			{
				text: 'Wright, Nolan',
				value: 'nolan-wright'
			}
		];

		const component = (
			<div
				style={{
					background: '#FFF',
					boxShadow: '0px 5px 15px 5px rgba(0, 0, 0, 0.05)'
				}}
			>
				<SemanticIcon
					name="filter"
					style={{
						fontSize: 16,
						fontWeight: 'bold',
						color: '#99A4AC',
						margin: '0 0 0 20px'
					}}
				/>
				<FilterSimple
					title="Locations"
					options={locations}
					multiple
					onChange={(value) => {
						console.log(`Selected ${value.join(', ')}`);
					}}
				/>
				<FilterSimple
					title="Person"
					options={people}
					onChange={(value) => {
						console.log(`Selected ${value}`);
					}}
				/>
			</div>
		);

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

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

		return component;
	});
};
