import React, { useContext, useEffect, useState } from 'react';
import './PlayerView.css';
import { WebsocketContext } from '../../components/WebsocketProvider';
import { Client } from '../../client';
import { TabletopElement } from '../../components/Tabletop/Tabletop';
import Candela from '../../plugins/Candela';
import { StateContext } from '../../providers/StateProvider/StateProvider';
import { assertNever } from '../../utils';

const TEST_CHARSHEET_UUID = "12df9c09-1f2f-4147-8eda-a97bd2a7a803";

interface PlayerViewProps {
    client: Client;
}

export const PlayerView = ({ client }: PlayerViewProps) => {
    const [state, dispatch] = useContext(StateContext);

    const [charsheet, setCharsheet] = useState(undefined);

    useEffect(
        () => {
            client.charsheet(TEST_CHARSHEET_UUID).then((c) => {
                setCharsheet(c)
            });
        },
        [client, setCharsheet]
    );

    switch (state.type) {
        case "Loading": return <div></div>;
        case "Ready": {
            const backgroundColor = state.tabletop.backgroundColor;
            const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`;
            const backgroundUrl = state.tabletop.backgroundImage ? client.imageUrl(state.tabletop.backgroundImage) : undefined;

            return (<div className="player-view" style={{ backgroundColor: tabletopColorStyle }}>
                <div className="player-view__middle-panel"> <TabletopElement backgroundColor={backgroundColor} backgroundUrl={backgroundUrl} /> </div>
                <div className="player-view__right-panel">
                    {charsheet ? <Candela.CharsheetPanelElement sheet={charsheet} /> : <div> </div>}</div>
            </div>)
        }
        default: {
            assertNever(state);
            return <div></div>;
        }
    }
}