import {useEffect, useState} from 'react'
import Modal from '../../modal/modal-video'
import router, { useRouter } from "next/router";

const useModal = () => {
    const [isShown, setIsShown] = useState<boolean>(false);
    const toggle = () => setIsShown(!isShown);
    return {
        isShown,
        toggle,
    };
};

const PlayBtn = () => {
    const { isShown, toggle } = useModal();
    const [video, setVideo ] = useState('');
    const [title, setTitle] = useState('')
    const router = useRouter()
    useEffect(() => {
        if(router.locale == 'nl-BE'){
            const url = "/video/nl.mp4"
            setTitle("Test in Dutch")
            setVideo(url)
        }else if (router.locale == 'en-US'){
            const url = "/video/eng.mp4"
            setTitle("Test in English")
            setVideo(url)
        }else {
            const url = "/video/fr.mp4"
            setTitle("Test in French")
            setVideo(url)
        }
    })
  
    return(
        <>
        <div className="h-28 w-28 bg-white rounded-full playBtn mt-20 md:mt-0">
            <button type="button" onClick={toggle}><img src="../../img/play-button.png" alt="" /></button>
        </div>
        <Modal 
            isShown={isShown}
            hide={toggle}
            headerText={title}
            modalContent={
                <iframe width="100%" height="100%"
                    src={video}>
                </iframe>
            }
        />
        </>
    )
}

export default PlayBtn