/* eslint object-curly-newline: 0 */
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 Spreadsheet from './index';

class Example extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			columns: [{
				title: 'Name',
				accessor: 'name',
				editable: true
			}, {
				title: 'Role',
				accessor: 'role',
				type: Spreadsheet.TYPE.ENUM,
				editable: true
			}, {
				title: 'Cap Number',
				accessor: 'cap',
				editable: false
			}, {
				title: 'Starting XI',
				accessor: 'selected',
				type: Spreadsheet.TYPE.TOGGLE,
				editable: true
			}, {
				title: 'Notes',
				accessor: 'notes',
				editable: true
			}],
			data: [{
				name: 'Rory Burns',
				role: 'batsman',
				cap: '681',
				selected: true
			}, {
				name: 'Keaton Jennings',
				role: 'batsman',
				cap: '675',
				selected: true
			}, {
				name: 'Joe Root',
				role: 'batsman',
				cap: '655',
				selected: true
			}, {
				name: 'Moeen Ali',
				role: 'all-rounder',
				cap: '662',
				selected: true
			}, {
				name: 'Ben Stokes',
				role: 'all-rounder',
				cap: '658',
				selected: true
			}, {
				name: 'Jos Buttler',
				role: 'batsman',
				cap: '665',
				selected: true
			}, {
				name: 'Jonny Bairstow',
				role: 'wicket-keeper',
				cap: '652',
				selected: true
			}, {
				name: 'Ben Foakes',
				role: 'wicket-keeper',
				cap: '680',
				selected: true
			}, {
				name: 'Chris Woakes',
				role: 'all-rounder',
				cap: '657',
				selected: false
			}, {
				name: 'Sam Curran',
				role: 'bowler',
				cap: '686',
				selected: false
			}, {
				name: 'Stuart Broad',
				role: 'bowler',
				cap: '638',
				selected: true
			}, {
				name: 'James Anderson',
				role: 'bowler',
				cap: '613',
				selected: true
			}, {
				name: 'Jack Leach',
				role: 'bowler',
				cap: '682',
				selected: true
			}, {
				name: 'Adil Rashid',
				role: 'bowler',
				cap: '683',
				selected: false
			}],
			options: {
				role: [{
					text: 'Batsman',
					value: 'batsman'
				}, {
					text: 'Bowler',
					value: 'bowler'
				}, {
					text: 'Wicket Keeper',
					value: 'wicket-keeper'
				}, {
					text: 'All-rounder',
					value: 'all-rounder'
				}]
			}
		};
	}

	render() {
		const { columns, data, options } = this.state;

		const mode = select('Mode', { Edit: Spreadsheet.MODE.EDIT, Toggle: Spreadsheet.MODE.TOGGLE }, Spreadsheet.MODE.EDIT);

		return (
			<div style={{ width: '100%' }}>
				<Spreadsheet
					data={data}
					columns={columns}
					counts={{ total: data.count }}
					enabledProperty="selected"
					mode={mode}
					name={{ singular: 'player', plural: 'players' }}
					options={options}
					onFetchData={(previousState, nextState) => {
						this.setState({
							data: this.data.slice(nextState.pagination.pageSize * nextState.pagination.page, (nextState.pagination.pageSize * nextState.pagination.page) + nextState.pagination.pageSize),
							pagination: nextState.pagination
						});
					}}
				/>
			</div>
		);
	}
}

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

	stories.add('Spreadsheet', () => {
		const component = (
			<Example />
		);

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

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

		return component;
	});
};
