import React, { useState, useEffect } from 'react';
import './Grille_video_style.css';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';

//Adaptable web/phone style
const ContainerStyle = styled.div`
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  justify-content: center;
  background-color: black;

  //Adaptation for phone
  @media (max-width: 85em) {
    width: 70%;
  }
`;


const Grille_video: React.FC = () => {
  const location = useLocation();
  const { paths } = location.state as { paths: string[] };
  const [videos, setVideos] = useState(paths);
  const [isMobile, setIsMobile] = useState<boolean>(window.matchMedia('(max-width: 85em)').matches);
  const navigate = useNavigate();

  // Back button press function
  const handleBackClick = () => {
    document.body.style.overflow = 'auto';
    document.exitFullscreen().catch(err => console.log(err));
    navigate('/Grille');
  };

  // Detection of whether or not the website is used by phone
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.matchMedia('(max-width: 85em)').matches);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // Disable scrolling
  document.body.style.overflow = 'hidden';

  return (
    <ContainerStyle>
      <button onClick={handleBackClick} style={styles.backButton}>
        Retour
      </button>
      {videos.map((src, index) => (
        <video
          key={index}
          style={styles.videoMain}
          controls={isMobile ? selectedVideoIndex === index : true}
          autoPlay
          loop
          muted
          className="custom-video"
          preload="auto"
        >
          <source src={src} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      ))}
    </ContainerStyle>
  );
};

const styles: { [key: string]: React.CSSProperties | any } = {
  backButton: {
    position: 'absolute',
    top: '10px',
    left: '10px',
    padding: '10px 20px',
    backgroundColor: '#EA6666',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
    zIndex: 1100,
  },
  videoMain: {
    position: 'absolute',
    width: '100vw', 
    height: 'calc(100vh - 50px)',
    objectFit: 'cover',
    opacity: 1,
    zIndex: 1000,
  },
};

export default Grille_video;