import React, { useState, useEffect } from 'react';
import { Grid } from '../../';
import '../main.scss';
import { primaryColor } from '../../config';

interface CaroselProps {
    images: string []
}

export default ({ images }: CaroselProps) => {

    const imgStyle = { width: "50vw", minHeight: "40vh", paddingTop: "1em", maxHeight: "61vh" };

    const [step, setStep] = useState(0);
    const [clicked, setClicked] = useState(false);

    const nextStep = (e: any) => {
        if (images.length - 1 > step) setStep(step + 1);
        else setStep(0);
        setClicked(true);
    }
    const previousStep = (e: any) => {
        if (step > 0) setStep(step - 1);
        else
            setStep(images.length - 1);
        setClicked(true);
    }

    useEffect(() => {
        if (!clicked) setTimeout(() => nextStep(null), 2200)
    }, [step])

    return (
        <div className="hide-mobile grid" style={{ margin: "3% 0" }}>
            <Grid mobileLayout={false} customCols="auto auto auto" width="100%">
                <i className="fa fa-chevron-left left" aria-hidden="true" onClick={previousStep} style={{ color: primaryColor }}></i>
                {images.map((img: any, i: number) => {
                    return i !== step ? null : <img key={i} className="slide-in" src={img} style={imgStyle} />
                })}

                <i className="fa fa-chevron-right right" aria-hidden="true" onClick={nextStep} style={{ color: primaryColor }}></i>
            </Grid>
            <span style={{ placeSelf: "center", padding: "4em 1em" }}>
                {[...Array(images.length)].map((e, i) => <><span onClick={() => setStep(i)} className={`round ${i !== step ? 'white' : 'gray'}`}></span>&nbsp;</>)}
            </span>
        </div>)
}