import React, { useState } from 'react';
import { Data } from "../../models/game";
import { Menu, Portal } from '@chakra-ui/react';
import GameThumbnail from "./GameThumbnail";
import { Box, useDisclosure } from "@chakra-ui/react";
import GameThumbnailSlide from "./GameThumbnailSlide";
import { playStatusValues } from "../../componentUtils/SelectValues";
import agent from "../../api/agent";
import { Link } from "react-router-dom";

interface Props {
    game: Data
}

const GameThumbnailContextMenu = ({ game }: Props) => {
    const { open: isOpen, onToggle } = useDisclosure()
    const [playState, setPlayState] = useState(game.accessedBy[0].playStatus)
    const gameLink = game.steamId.length > 1 ? game.steamId : game._id

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

    let mql = window.matchMedia('(max-width: 768px)');

    return (
        <Menu.Root key={game._id}>
            <Menu.ContextTrigger asChild>
                <Box
                    borderWidth={'1px'} borderStyle={'solid'}
                    borderColor={'gray.500'}
                    maxW={'sm'}
                    rounded={'md'}
                    transitionProperty={'box-shadow transform'}
                    transitionDuration={'1'}
                    transitionTimingFunction={'ease-in-out'}
                    _hover={{ boxShadow: '2xl', transform: 'translateY(-3px)' }}
                >
                    <GameThumbnail onToggle={onToggle} game={game} playState={playState} />
                </Box>
            </Menu.ContextTrigger>
            <Portal>
                <Menu.Positioner>
                    <Menu.Content>
                        <Menu.Item value="open-new-tab" asChild>
                            <Link to={`/games/${gameLink}`} target="_blank" rel="noopener noreferrer">Open in New Tab</Link>
                        </Menu.Item>
                        <Menu.ItemGroup>
                            <Menu.ItemGroupLabel>Change PlayStatus</Menu.ItemGroupLabel>
                            {playStatusValues.map((value, idx) => (
                                <Menu.Item
                                    key={idx}
                                    value={value.value}
                                    onSelect={() => rightClick(value.label, value.value)}
                                >{value.label}</Menu.Item>
                            ))}
                        </Menu.ItemGroup>
                    </Menu.Content>
                </Menu.Positioner>
            </Portal>
            {(!mql.matches) && <GameThumbnailSlide isOpen={isOpen} game={game} />}
        </Menu.Root>
    );
};

export default GameThumbnailContextMenu;