import { useContext, useEffect, useRef } from 'react';
import { useTour } from '@reactour/tour';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';
import PageWrapper from '../../layout/PageWrapper/PageWrapper'
import Page from '../../layout/Page/Page';

const RhapsodytvPage = () => {
	const { mobileDesign } = useContext(ThemeContext);
	/**
	 * Tour Start
	 */
	const { setIsOpen } = useTour();

	useEffect(() => {
		
		if (localStorage.getItem('tourModalStarted') !== 'shown' && !mobileDesign) {
			setTimeout(() => {
				setIsOpen(true);
				localStorage.setItem('tourModalStarted', 'shown');
			}, 7000);
		}

		fetch('https://databasemanagementapi.tniglobal.org/api/sliders')
		.then((response) => response.json())
		.then((data) => {
			console.log(data);
			
		})
		.catch((err) => {
			console.log(err.message);
		});

		return () => {};
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const playerRef = useRef(null);

  const videoJsOptions = {
    autoplay: true,
    controls: true,
    responsive: true,
    fluid: true,
    sources: [{
      src: 'https://2nbyjxnbl53k-hls-live.5centscdn.com/RTV/59a49be6dc0f146c57cd9ee54da323b1.sdp/playlist.m3u8',
      type: 'application/x-mpegURL'
    }]
  };

  const handlePlayerReady = (player: any) => {
    playerRef.current = player;

    // You can handle player events here, for example:
    player.on('waiting', () => {
      //videojs.log('player is waiting');
    });

    player.on('dispose', () => {
      //videojs.log('player will dispose');
    });
  };

	const { themeStatus } = useDarkMode();

	return (
		<PageWrapper title="Rhapsodytv">
			<Page container='fluid'>
				<div className='pt-3 pb-5'>
					Rhapsody TV
				</div>
			</Page>
		</PageWrapper>
	);
};

export default RhapsodytvPage;