import React, { useEffect, useState, useCallback } from 'react';
import { Client, PlayingField } from '../../client';
import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
import './PlayingField.css';
import useWebSocket, { ReadyState } from 'react-use-websocket';

/*
export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
    const [socketUrl, setSocketUrl] = useState<string | undefined>(undefined);
    const [field, setField] = useState<PlayingField | undefined>(undefined);

    const [images, setImages] = useState<string[]>([]);
    useEffect(() => {
        client.availableImages().then((images) => setImages(images));
    }, [client]);

    const backgroundUrl = field && client.imageUrl(field.backgroundImage);
    return (<div className="playing-field">
        <div>
            {images.map((imageName) => <ThumbnailComponent client={client} imageId={imageName} />)}
        </div>
        <div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
        <div> Right Panel </div>
    </div>)
}
*/

interface WebsocketPlayingFieldProps {
    client: Client;
    websocketUrl: string;
}

type Message = |
{
    type: "PlayArea";
    background_image: string;
}

export const WebsocketPlayingFieldComponent = ({ client, websocketUrl }: WebsocketPlayingFieldProps) => {
    const { lastMessage, readyState } = useWebSocket(websocketUrl);
    const [backgroundUrl, setBackgroundUrl] = useState<URL | undefined>(undefined);

    useEffect(() => {
        if (lastMessage !== null) {
            const message: Message = JSON.parse(lastMessage.data);
            console.log("playing area: ", message);
            console.log("playing area: ", message.background_image);
            setBackgroundUrl(client.imageUrl(message.background_image));
        }
    }, [lastMessage]);

    const connectionStatus = {
        [ReadyState.CONNECTING]: 'Connecting',
        [ReadyState.OPEN]: 'Open',
        [ReadyState.CLOSING]: 'Closing',
        [ReadyState.CLOSED]: 'Closed',
        [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
    }[readyState];

    return <PlayingFieldComponent backgroundUrl={backgroundUrl} connectionStatus={connectionStatus} />;
}

interface PlayingFieldProps {
    backgroundUrl: URL | undefined;
    connectionStatus: string;
}

export const PlayingFieldComponent = ({ backgroundUrl, connectionStatus }: PlayingFieldProps) => {
    if (backgroundUrl) {
        return (<div className="playing-field">
            <div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
            <div> {connectionStatus} </div>
        </div>)
    } else {
        return (<div className="playing-field">
            <div> </div>
            <div> {connectionStatus} </div>
        </div>
        );
    }
}