import React, {useEffect, useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";
import {usePubAffDispatch} from "../../../hooks/useExternalWindow.jsx";
import {useTranslation} from "react-i18next";
import {useWS} from "../../../hooks/useWS.jsx";

export function PointPanel({menuActions}) {
    const [revers, setRevers] = useState(false)
    const [scoreRouge, setScoreRouge] = useState(0)
    const [scoreBleu, setScoreBleu] = useState(0)
    const publicAffDispatch = usePubAffDispatch()
    const {t} = useTranslation("cm");

    menuActions.current.switchSore = () => {
        setRevers(!revers)
    }

    const handleSave = () => {
        menuActions.current.saveScore?.(scoreRouge, scoreBleu)
        handleReset();
    }

    const handleReset = () => {
        setScoreRouge(0);
        setScoreBleu(0);
    }

    useEffect(() => {
        publicAffDispatch({type: 'SET_DATA', payload: {scoreRouge: scoreRouge, scoreBleu: scoreBleu}})
    }, [scoreRouge, scoreBleu])

    const red =
        <div className="col-5 row align-items-center" style={{padding: "0 1em"}}>
            <button className="btn btn-secondary" onClick={() => setScoreRouge(scoreRouge + 1)}><FontAwesomeIcon icon={faChevronUp}/></button>
            <h1 style={{color: "red", fontSize: "min(15vw, 7em)", textAlign: "center"}}>{scoreRouge}</h1>
            <button className="btn btn-secondary" onClick={() => setScoreRouge(scoreRouge - 1)}><FontAwesomeIcon icon={faChevronDown}/></button>
        </div>

    return <div className="row">
        {!revers && red}
        <div className="col-5 row align-items-center" style={{padding: "0 1em"}}>
            <button className="btn btn-secondary" onClick={() => setScoreBleu(scoreBleu + 1)}><FontAwesomeIcon icon={faChevronUp}/></button>
            <h1 style={{color: "blue", fontSize: "min(15vw, 7em)", textAlign: "center"}}>{scoreBleu}</h1>
            <button className="btn btn-secondary" onClick={() => setScoreBleu(scoreBleu - 1)}><FontAwesomeIcon icon={faChevronDown}/></button>
        </div>
        {revers && red}

        <div className="col row align-items-center">
            <button className="btn btn-danger" onClick={handleReset}>{t('réinitialiser')}</button>
            { /*<button className="btn btn-success" onClick={handleSave}>{t('sauvegarder')}</button> */}
        </div>
        <SendScore scoreRouge={scoreRouge} scoreBleu={scoreBleu}/>
    </div>
}

function SendScore({scoreRouge, scoreBleu}) {
    const {sendNotify, setState} = useWS();

    useEffect(() => {
        setState({scoreState: {scoreRouge, scoreBleu}});
        sendNotify("sendCurrentScore", {scoreRouge, scoreBleu});
    }, [scoreRouge, scoreBleu]);

    return <>
    </>
}
