import * as React from 'react';
import axios from "axios";
import { ProductImageController_GetImage } from '../../apiClient/routes';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'
import '../../custom.css'

interface NewCarouselProps {
    imageIds: number[]
}

const arrowStyles: React.CSSProperties = {
    position: 'absolute',
    zIndex: 2,
    top: '0',
    fontSize: '26px',
    cursor: 'pointer',
    border: 'none',
    backgroundColor: 'rgb(243, 246, 250, 0.6)',
    height: '100%',
};

export const NewCarousel = ({imageIds}: NewCarouselProps) => {
    if (imageIds && imageIds.length > 1) {
        return (
			<Carousel
                showStatus={false}
                showIndicators={false}
                autoFocus={false}
                showThumbs={false}
                infiniteLoop
                showArrows
                autoPlay
                useKeyboardArrows
                swipeable
                className='h-100'
                dynamicHeight
                renderArrowPrev={(onClickHandler, hasPrev, label) => (
                    hasPrev &&
                    <button type='button' onClick={onClickHandler} title={label}
                        style={{
                            ...arrowStyles,
                            left: 0,
                        }}>
                        <i className="fas fa-chevron-left"></i>
                    </button>
                )}
                renderArrowNext={(onClickHandler, hasPrev, label) => (
                    hasPrev &&
                    <button type='button' onClick={onClickHandler} title={label}
                        style={{
                            ...arrowStyles,
                            right: 0,
                        }}>
                        <i className="fas fa-chevron-right"></i>
                    </button>
                )}
            >
                {imageIds.map((imageId, index) => (
                    <div key={'carouselImage-' + index}>
                        <Zoom>
                            <img src={`${axios.defaults.baseURL + ProductImageController_GetImage(imageId.toString())}`} />
                        </Zoom>
                    </div>
                ))}
            </Carousel>
        );
    }
    else if (imageIds && imageIds.length === 1) {
        return (
            <Zoom>
                <img src={`${axios.defaults.baseURL + ProductImageController_GetImage(imageIds[0].toString())}`} />
            </Zoom>
        );
    }
    else {
        return (
            <img src="img/product/details/product-details-1.jpg" />
        );
    }
}