import React, { useEffect, useState } from 'react';
import { getSigns, addSign } from '../services/signs';
import { Sign, SignVideo } from '../types/sign';
import SignComponent from './SignComponent';
import SignVideoThumbnail from './SignVideoThumbnail';

interface Props {
    sign: Sign | null;
    currentVideo: number | null;
    setCurrentVideo: (sign_video: number | null) => void;
}

const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo }) => {

    const [isHovered, setIsHovered] = React.useState(false);

    const handleVideoClick = (sign_video: number) => {
        setCurrentVideo(sign_video);
    }

    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5" >
            {sign != null &&
                <div className={`rounded-lg w-60 h-32 ${isHovered ? 'bg-gray-300' : 'bg-gray-200'} flex items-center justify-center ${isHovered ? 'text-6xl' : 'text-4xl'}`} onMouseEnter={() => {
                    setIsHovered(true);
                }}
                    onMouseLeave={() => {
                        setIsHovered(false);
                    }} onClick={
                        () => {
                            setCurrentVideo(null);
                        }
                    }>
                    <i className={`fas fa-camera ${isHovered ? 'text-6xl' : 'text-4xl'}`}></i>
                </div>
            }
            {sign &&
                // show videos sorted, the non accepted videos must be at the top
                sign.sign_videos.sort((a, b) => {
                    if (a.approved && !b.approved) {
                        return 1;
                    } else if (!a.approved && b.approved) {
                        return -1;
                    } else {
                        return 0;
                    }
                }
                ).map((vid, i) => {
                    return (
                        <SignVideoThumbnail
                            key={i}
                            selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)}
                        />
                    );
                })
            }
        </div >
    );
};

export default SignVideoGrid;