import React from 'react';
import { Modal, Carousel } from 'antd';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';


interface Media {
	src: string
}

interface IPopupGallery {
	media: Media[],
	children,
	currentMediaIndex?
}


const
	PopupGallery = ({media, children, currentMediaIndex}: IPopupGallery) => {
		const [modalVisible, setModalVisible] = React.useState(false);
		const ref = React.useRef();

		const
			[autoPlay, setAutoPlay] = React.useState(true),
			onMouseOver = () => setAutoPlay(false),
			onMouseOut = () => {
				setAutoPlay(true);
			};


		React.useEffect(() => {
			ref?.current?.goTo(currentMediaIndex, true);
		}, [currentMediaIndex]);


		return (
			<>
				<Modal
					bodyStyle={{background: 'transparent'}}
					visible={modalVisible}
					onCancel={() => setModalVisible(false)}
					footer={null}>
					<div style={{position: 'relative', width: '100%', padding: '0 20px'}}>
						<CaretLeftOutlined style={{ fontSize: '25px', position: 'absolute', top: '50%', left: 0 }} onClick={() => ref?.current?.prev()} />
						<Carousel ref={ref} dotPosition='top' autoplay={autoPlay}>
							{media.map(med =>
								<div onMouseOver={onMouseOver} onMouseOut={onMouseOut} key={med.src} style={{width: '100%', border: 'solid red 2px'}}>
									<img src={med.src} style={{width: '100%'}} />
								</div>
							)}
						</Carousel>
						<CaretRightOutlined style={{ fontSize: '25px', position: 'absolute', top: '50%', right: 0 }} onClick={() => ref?.current?.next()} />
					</div>
				</Modal>
				{children(() => setModalVisible(true))}
			</>
		);
	};

export default PopupGallery;