import React from 'react';
import { Data } from '../../models/game'
import agent from "../../api/agent";
import {playStatusValues} from "../../componentUtils/SelectValues";
import {Select} from "../FixedSelect";
import {ImmutableObject} from "@hookstate/core";


interface Props {
    game: Data | ImmutableObject<Data>
    playState: string
    setPlayState: any
}

const GamePlayStatus = ({game, playState, setPlayState}: Props) => {

    const handleClick = async (label: string, playStatus: string) => {
        try {
            setPlayState(playStatus)
            await agent.Games.playStatus(game._id, {
                accessedBy: [{
                    playStatus
                }]
            })
        } catch (err) {
            console.error(`${label}: ${err}`)
        }
    }

        return <Select
                    id={'playStatus'}
                    name={'playStatus'}
                    value={{
                        value: playState,
                        label: playState,
                    }}
                    onChange={(e: any)  => {
                        if(e === null) return
                        handleClick(e.value, e.label)
                    }}
                    size={'sm'}
                    options={playStatusValues}
                    chakraStyles={{
                        container: (provided: any) => ({
                            ...provided,
                            width: "150px"
                        })
                    }}
                />
    };

    export default GamePlayStatus;