import React from 'react';
import webShare from 'react-web-share-api';
import { Drawer, Badge, Space, Input, Button } from 'antd';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import {
	EmailShareButton,
	FacebookShareButton,
	InstapaperShareButton,
	LinkedinShareButton,
	PinterestShareButton,
	RedditShareButton,
	TelegramShareButton,
	TwitterShareButton,
	WhatsappShareButton,
	EmailIcon,
	FacebookIcon,
	InstapaperIcon,
	LinkedinIcon,
	PinterestIcon,
	RedditIcon,
	TelegramIcon,
	TwitterIcon,
	WhatsappIcon,
} from 'react-share';
import { ShareAltOutlined, CheckOutlined, CopyOutlined } from '@ant-design/icons';


const
	Share = ({ title, url = window.location.pathname, text, children }: { title: string, url?: string, text: string, children?: any }) => {
		url = process.env.APP_URL + url;

		const ShareComponent = webShare()(({ share, isSupported }: { share?, isSupported?}) => {
			const
				[showDrawer, setShowDrawer] = React.useState(false),
				[copied, setCopied] = React.useState(false);

			return isSupported
				? <span onClick={share}>Share <ShareAltOutlined /></span>
				: (
					<>
						<span onClick={e => setShowDrawer(true)}>
							{children
								? children
								: (
									<Button type='ghost'>
										Share <ShareAltOutlined />
									</Button>
								)}
						</span>
						<Drawer className='text-center' onClose={e => setShowDrawer(false)} title={<span>Share <ShareAltOutlined /></span>} placement="right" visible={showDrawer}>
							<Input value={url} className='mb-10' />
							<CopyToClipboard className='mb-20' text={url} onCopy={() => setCopied(true)}>
								<Button icon={copied ? <CheckOutlined /> : <CopyOutlined />} type='primary' block>{copied ? 'Link copied' : 'Copy Link'}</Button>
							</CopyToClipboard>


							<TwitterShareButton style={{ margin: '10px 5px' }} url={url} title={title} via={process.env.APP_NAME}>
								<Space direction='vertical' size={10}>
									<TwitterIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</TwitterShareButton>

							<FacebookShareButton style={{ margin: '10px 5px' }} url={url}>
								<Space direction='vertical' size={10}>
									<FacebookIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</FacebookShareButton>

							<WhatsappShareButton style={{ margin: '10px 5px' }} url={url} title={title}>
								<Space direction='vertical' size={10}>
									<WhatsappIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</WhatsappShareButton>

							<EmailShareButton style={{ margin: '10px 5px' }} url={url} subject={title} body={text}>
								<Space direction='vertical' size={10}>
									<EmailIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</EmailShareButton>

							<LinkedinShareButton style={{ margin: '10px 5px' }} url={url} title={title} summary={text} source={process.env.APP_NAME}>
								<Space direction='vertical' size={10}>
									<LinkedinIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</LinkedinShareButton>

							<PinterestShareButton style={{ margin: '10px 5px' }} url={url} media={url} description={text}>
								<Space direction='vertical' size={10}>
									<PinterestIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</PinterestShareButton>

							<RedditShareButton style={{ margin: '10px 5px' }} url={url} title={title}>
								<Space direction='vertical' size={10}>
									<RedditIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</RedditShareButton>

							<TelegramShareButton style={{ margin: '10px 5px' }} url={url} title={title}>
								<Space direction='vertical' size={10}>
									<TelegramIcon size={35} round={true} />
									{shareCount => <Badge count={shareCount} />}
								</Space>
							</TelegramShareButton>
						</Drawer>
					</>
				);
		});

		const config = {
			params: {
				title: title,
				text: text,
				url: url,
			}
		};
		return (
			<ShareComponent config={config} />
		);
	};

export default Share;