/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react-native';

import ServerItemComponent from '../../app/presentation/ServerItem';
import { ThemeContext } from '../../app/theme';

const stories = storiesOf('ServerItem', module);

const themes = {
	light: 'light',
	dark: 'dark',
	black: 'black'
};

const item = {
	name: 'Rocket.Chat',
	id: 'https://open.rocket.chat/',
	iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
};

const ServerItem = props => (
	<ServerItemComponent
		item={item}
		hasCheck={false}
		{...props}
	/>
);

stories.add('content', () => (
	<>
		<ServerItem
			hasCheck
		/>
		<ServerItem
			item={{
				...item,
				name: 'Super Long Server Name in Rocket.Chat',
				id: 'https://superlongservername.tologintoasuperlongservername/'
			}}
		/>
		<ServerItem
			item={{
				id: 'https://stable.rocket.chat/'
			}}
		/>
	</>
));

stories.add('touchable', () => (
	<>
		<ServerItem onLongPress={() => alert('Long Press')} onPress={() => alert('Press')} />
		<ServerItem onPress={() => alert('Press')} />
		<ServerItem onLongPress={() => alert('Long Press')} />
	</>
));

const ThemeStory = ({ theme }) => (
	<ThemeContext.Provider value={theme}>
		<ServerItem
			theme={theme}
			hasCheck
		/>
	</ThemeContext.Provider>
);

stories.add('themes', () => (
	<>
		<ThemeStory theme={themes.light} />
		<ThemeStory theme={themes.dark} />
		<ThemeStory theme={themes.black} />
	</>
));