import '../css/Player.css'

import Heart from "../icons/Heart.jsx"
import Deodorant from "../icons/Deodorant.jsx"
import Contact from "../icons/Contact.jsx"
import ArrowRight from "../icons/ArrowRight.jsx"
import ThreeDots from "../icons/ThreeDots.jsx"
import Play from "../icons/Play.jsx"
import Pause from "../icons/Pause.jsx"
import { default as axios } from 'axios'
import { config } from '../main.jsx'
import { animate, createScope } from 'animejs'
import { useRef, useEffect } from 'react';

function Player(props) {
    const root = useRef(null);
    const scope = useRef(null);
    const { video, information, top, className } = props;
    const screenHeight = window.innerHeight;
    const videoHeight = screenHeight - 100; // Adjusting for some padding/margin
    const videoRef = useRef(null);

    const animateDetail = (id) => {
        scope.current = createScope({ root }).add(() => {
            console.log("monkey")
            animate(id, {
                width: {
                    from: "50px",
                    to: "300px"
                },
                height: {
                    from: "50px",
                    to: "300px"
                },
                opacity: {
                    from: 0,
                    to: 0.5
                },

                ease: "inExpo",
                duration: 500,
                loop: false,
                onComplete: () => {
                    animate(id, {
                        opacity: {
                            from: 0.5,
                            to: 0
                        }
                    })
                }
            });
        })
    }

    const handlePlay = () => {
        if(videoRef.current.paused) {
            videoRef.current.play();
            animateDetail("#play-icon");
        } else {
            videoRef.current.pause();
            animateDetail("#pause-icon");
        }
    }

    return (
        <>
            <div className={`container ${className}`} ref={root} style={{ transform: `translateY(${top})` }}>
                <div className="video-container" onClick={handlePlay}>
                    <video
                        className="video-player"
                        id="video-player"
                        height={videoHeight}
                        ref={videoRef}
                    >
                        <source src={config.serverURL + "/video/" + video} type="video/mp4"></source>
                    </video>

                    <div className="animated-detail" id="play-icon">
                        <Play size={"100%"} />
                    </div>

                    <div className="animated-detail" id="pause-icon">
                        <Pause size={"100%"} />
                    </div>

                    <div className="video-information">
                        <h1>{information.title}</h1>
                        <p>{information.description}</p>
                    </div>
                </div>

                <div className="video-interactions">
                    <button className="interaction" id="like">
                        <Heart size={30} />
                        <span className="interaction-count">{information.likes}</span>
                    </button>
                    <button className="interaction" id="dislike">
                        <Deodorant size={30} />
                        <span className="interaction-count">{information.dislikes}</span>
                    </button>
                    <button className="interaction" id="comment">
                        <Contact size={30} />
                        <span className="interaction-count">{information.comments}</span>
                    </button>
                    <button className="interaction" id="share">
                        <ArrowRight size={30} />
                        <span className="interaction-count">{information.shares}</span>
                    </button>
                    <button className="interaction" id="more">
                        <ThreeDots size={30} />
                        <span className="interaction-count">More</span>
                    </button>
                </div>
            </div>
        </>
    );
}

export default Player
