/* eslint object-curly-newline: 0 */
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { describe, it, specs } from '../../storybook/facade';
import Chart from './index';

export default (stories) => {
	Chart.createPlugins();

	stories.add('Bar', () => {
		const data = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
			datasets: [{
				label: 'Commits',
				data: [51, 65, 40, 49, 40, 33, 90, 88, 72, 85],
				backgroundColor: '#0099CC'
			}]
		};

		const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes]);

		const component = (
			<div style={{ width: 500, height: 350, padding: 20, background: '#FFF' }}>
				<Chart.Bar
					data={data}
					options={options}
				/>
			</div>
		);

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

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

		return component;
	});

	stories.add('BarHorizontal', () => {
		const data = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
			datasets: [{
				label: 'Commits',
				data: [51, 65, 40, 49, 40, 33, 90, 88, 72, 85],
				backgroundColor: '#0099CC'
			}]
		};

		const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes, {
			tooltips: {
				callbacks: {
					label: (item) => {
						return item.xLabel;
					}
				}
			}
		}]);

		const component = (
			<div style={{ width: 500, height: 350, padding: 20, background: '#FFF' }}>
				<Chart.BarHorizontal
					data={data}
					options={options}
				/>
			</div>
		);

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

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

		return component;
	});

	stories.add('Doughnut', () => {
		const data = {
			labels: ['Q1', 'Q2', 'Q3', 'Q4'],
			datasets: [{
				label: 'Commits',
				data: [51, 40, 33, 90],
				backgroundColor: ['#0099CC', '#FF9900', '#99A4AC', '#27465B']
			}]
		};

		const options = Chart.Style.merge([Chart.Style.Default, {
			tooltips: {
				callbacks: {
					label: (item, dataset) => {
						return `${dataset.labels[item.index]}: ${dataset.datasets[item.datasetIndex].data[item.index]}`;
					}
				}
			}
		}]);

		const component = (
			<div style={{ width: 350, height: 350, padding: 20, background: '#FFF' }}>
				<Chart.Doughnut
					data={data}
					options={options}
				/>
			</div>
		);

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

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

		return component;
	});

	stories.add('Line', () => {
		const data = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
			datasets: [{
				label: 'Commits',
				data: [51, 65, 40, 49, 40, 33, 90, 88, 72, 85],
				...Chart.Style.Point
			}]
		};

		const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes]);

		const component = (
			<div style={{ width: 500, height: 350, padding: 20, background: '#FFF' }}>
				<Chart.Line
					data={data}
					options={options}
				/>
			</div>
		);

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

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

		return component;
	});

	stories.add('Scatter', () => {
		const dataArray = [
			{
				x: 10, y: 25, xPrior: 5, yPrior: 25, label: 'Alpha'
			},
			{
				x: 50, y: 75, xPrior: 65, yPrior: 75, label: 'Bravo'
			},
			{
				x: 90, y: 90, xPrior: 85, yPrior: 90, label: 'Charlie'
			},
			{
				x: 75, y: 50, xPrior: 25, yPrior: 50, label: 'Delta'
			},
			{
				x: 25, y: 10, xPrior: 75, yPrior: 10, label: 'Echo'
			}
		];

		const data = {
			labels: 'Teams',
			datasets: [{
				data: dataArray,
				...Chart.Style.Point
			}]
		};

		const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes, Chart.Style.Scatter]);

		const component = (
			<div style={{ width: 600, height: 600, padding: 20, background: '#FFF' }}>
				<Chart.Scatter
					data={data}
					options={options}
				/>
			</div>
		);

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

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

		return component;
	});
};
