import React, { useContext } from 'react';
import './PlayerView.css';
import { WebsocketContext } from '../../components/WebsocketProvider';
import { Client } from '../../client';
import { TabletopElement } from '../../components/Tabletop/Tabletop';

interface PlayerViewProps {
    client: Client;
}

export const PlayerView = ({ client }: PlayerViewProps) => {
    const { tabletop } = useContext(WebsocketContext);

    const backgroundColor = tabletop.backgroundColor;
    const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`;
    const backgroundUrl = tabletop.backgroundImage ? client.imageUrl(tabletop.backgroundImage) : undefined;

    return (<div className="player-view" style={{ backgroundColor: tabletopColorStyle}}>
        <div className="player-view__left-panel"> Left Side </div>
        <TabletopElement backgroundColor={backgroundColor} backgroundUrl={backgroundUrl} />
        <div className="player-view__right-panel"> Right Side </div>
    </div>)
}