import React from 'react';
import { withKnobs, select } from '@storybook/addon-knobs';
import { mount } from 'enzyme';
import { expect } from 'chai';
import {
	Icon as SemanticIcon,
	Button as SemanticButton
} from 'semantic-ui-react';
import { describe, it, specs } from '../../storybook/facade';
import Tooltip from './index';

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

	stories.add('Tooltip', () => {
		const position = select('Position', {
			'Top Left': 'top left',
			'Top Center': 'top center',
			'Top Right': 'top right',
			'Left Center': 'left center',
			'Right Center': 'right center',
			'Bottom Left': 'bottom left',
			'Bottom Center': 'bottom center',
			'Bottom Right': 'bottom right'
		}, 'top center');

		const component = (
			<Tooltip
				header="Average number of days required to close an issue"
				content={(
					<a href="https://docs.pinpt.com/glossary/" target="_blank" rel="noreferrer noopener">
						More information <SemanticIcon name="arrow right" />
					</a>
				)}
				position={position}
			>
				<SemanticButton style={{ margin: '200px' }}>Hover for Tooltip</SemanticButton>
			</Tooltip>
		);

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

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

		return component;
	});
};
