ffsaf-site/src/main/webapp/src/pages/competition/editor/PubAffWindow.jsx

import {useCombs} from "../../../hooks/useComb.jsx";
import {usePubAffState} from "../../../hooks/useExternalWindow.jsx";
import {SmartLogoBackgroundMemo} from "../../../components/SmartLogoBackground.jsx";
import {useMemo} from 'react';

const vite_url = import.meta.env.VITE_URL;

const noMP = {margin: 0, padding: 0};
const redBackground = "radial-gradient(circle, #C80000FF 0%, #000000FF 100%)"
const blueBackground = "radial-gradient(circle, #0000C8FF 0%, #000000FF 100%)"
const combHeight = "15vh";
const text1Style = {fontSize: "min(2.25vw, 8vh)", fontWeight: "bold", marginLeft: "0.5em"};
const text2Style = {fontSize: "min(1.7vw, 7vh)", fontWeight: "bold"};

export function PubAffWindow({document}) {
    const state = usePubAffState();

    document.title = "A React portal window"
    document.body.className = "bg-dark text-white overflow-hidden";

    const showScore = state.showScore ?? true;

    return <>
        <div className="row text-center"
             style={{background: "linear-gradient(to bottom, #000000, #323232)", height: `calc(100vh - ${combHeight} * 2)`, ...noMP}}>
            <div>
                <div style={{fontSize: "30vh", lineHeight: "30vh"}}>01:30</div>
                {showScore &&
                    <div className="row" style={noMP}>
                        <div className="col-4" style={noMP}>
                            <div style={{fontSize: "30vh", lineHeight: "30vh", color: "#ff1414"}}>0</div>
                        </div>
                        <div className="col-4" style={noMP}>
                        </div>
                        <div className="col-4" style={noMP}>
                            <div style={{fontSize: "30vh", lineHeight: "30vh", color: "#14adff"}}>0</div>
                        </div>
                    </div>}
            </div>
        </div>
        <div className="row fixed-bottom text-center" style={noMP}>

        </div>
        <div className="fixed-bottom text-center" style={noMP}>
            <div className="row" style={noMP}>
                <div className="col" style={noMP}>
                    <CombDisplay combId={state?.c1} background={"red"}>
                        <span className="position-absolute top-0 start-0 translate-middle-y" style={text1Style}>Actuel</span>
                    </CombDisplay>
                </div>
                <div className="col" style={noMP}>
                    <CombDisplay combId={state?.c2} background={"blue"}>
                        <span className="position-absolute bottom-0 start-0 translate-middle-x" style={text2Style}>contre</span>
                    </CombDisplay>
                </div>
            </div>
            <div className="row" style={noMP}>
                <div className="col" style={noMP}>
                    <CombDisplay combId={state?.next?.[0]?.c1} background={"red"}>
                        <span className="position-absolute top-0 start-0 translate-middle-y" style={text1Style}>Suivant</span>
                    </CombDisplay>
                </div>
                <div className="col" style={noMP}>
                    <CombDisplay combId={state?.next?.[0]?.c2} background={"blue"}>
                        <span className="position-absolute bottom-0 start-0 translate-middle-x" style={text2Style}>contre</span>
                    </CombDisplay>
                </div>
            </div>
            {!showScore && <div className="row" style={noMP}>
                <MatchDisplay state={state}/>
            </div>}
        </div>
    </>
}

function MatchDisplay({state}) {
    const {getComb} = useCombs();
    const combs = state?.next?.slice(1, 6) || [];

    return <div className="col-12 position-relative" style={{height: `calc(${combHeight} * 2)`}}>
        <div className="position-absolute bottom-0 start-0" style={{height: "100%", background: redBackground, width: "50vw"}}/>
        <div className="position-absolute bottom-0 start-50" style={{height: "100%", background: blueBackground, width: "50vw"}}/>
        <div className="position-absolute top-0 start-0 w-100" style={{...noMP, height: "0.4vh", backgroundColor: "#646464AA"}}/>
        <div className="position-absolute top-0 start-50" style={{
            ...noMP,
            height: `calc(${combHeight} * 1.5)`,
            width: "0.4vh",
            backgroundColor: "#646464AA",
            margin: `calc(${combHeight} * 0.25) 0`
        }}/>

        <div className="position-relative" style={{marginTop: `1vh`, color: "#dcdcdc"}}>
            {combs.map((match, index) => {
                const c1 = getComb(match.c1, "");
                const c2 = getComb(match.c2, "");

                return <div key={index} className="row" style={noMP}>
                    <div className="col" style={{fontSize: `3vh`, margin: "0.5vh 1vw"}}>
                        {c1.fname} {c1.lname}
                    </div>
                    <div className="col" style={{fontSize: `3vh`}}>
                        {c2.fname} {c2.lname}
                    </div>
                    {index !== combs.length - 1 &&
                        <div className="w-75" style={{...noMP, height: "0.2vh", margin: "0 12.5vw", backgroundColor: "#646464AA"}}/>}

                </div>
            })}
        </div>
    </div>
}

const logoStyle = {width: "6vw", height: "min(11vh, 6vw)", objectFit: "contain", margin: "0 .5vw"};

function CombDisplay({combId, background, children}) {
    const {getComb} = useCombs();
    const comb = getComb(combId, "");

    const logoAlt = useMemo(() => {
        return comb?.club_str
    }, [comb]);
    const logoSrc = useMemo(() => {
        return `${vite_url}/api/club/${comb?.club_uuid}/logo`
    }, [comb]);

    return <div className="col position-relative"
                style={{
                    height: combHeight,
                    background: background === "red" ? redBackground : blueBackground,
                    display: "flex",
                    flexDirection: background === "red" ? "row" : "row-reverse",
                    justifyContent: "space-between",
                    alignItems: "center",
                }}>
        {comb !== "" && <>
            <SmartLogoBackgroundMemo src={logoSrc} alt={logoAlt} style={logoStyle}/>
            <div style={{fontSize: "min(3.5vw, 6.5vh)"}}>{comb.fname} {comb.lname}</div>
            <img src={`/flags/svg/${comb.country.toLowerCase()}.svg`} alt={comb.country}
                 style={{width: "4vw", height: "8vh", objectFit: "contain", margin: "0 1.25vw"}}/>
        </>}
        <div className="position-absolute top-0 start-0 w-100" style={{...noMP, height: "0.4vh", backgroundColor: "#646464AA"}}/>
        {children}
    </div>
}