import React, { useEffect } from 'react'
import agent from '../api/agent'
import { useParams } from 'react-router'
import {
    Box,
    Button,
    Container,
    Flex,
    Grid,
    Heading,
    Link as ChakraLink,
    Spacer,
    Stack,
    Text,
    useColorModeValue,
    useDisclosure,
    useMediaQuery,
} from '@chakra-ui/react'
import ImageSlider from './detailsComponents/ImageSlider'
import Summary from './detailsComponents/Summary'
import Features from './detailsComponents/Features'
import SystemRequirements from './detailsComponents/SystemRequirementsMenu'
import { Link } from 'react-router-dom'
import { detailedGameState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { ImmutableObject, useHookstate } from '@hookstate/core'
import LoadingModal from './LoadingModal'
import SteamAndDeckLogo from './helperComponents/SteamAndDeckLogo'
import { ExternalLinkIcon } from '@chakra-ui/icons'
import { Data } from '../models/game'
import SummaryModal from './detailsComponents/SummaryModal'
import SystemRequirementsModal from './detailsComponents/SystemRequirementsModal'

const GameDetails = () => {
    const gameState = useHookstate(detailedGameState)
    const game: ImmutableObject<Data> = gameState.get().data
    const loadedState = useHookstate(loadingState)
    const loaded = loadedState.get()
    const { id } = useParams<{ id: string }>()
    const bg = useColorModeValue('white', 'gray.700')
    const { isOpen: isSummaryOpen, onOpen: onSummaryOpen, onClose: onSummaryClose } = useDisclosure()
    const { isOpen: isSystemOpen, onOpen: onSystemOpen, onClose: onSystemClose } = useDisclosure()
    const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')

    useEffect(() => {
        const getGame = async () => {
            loadedState.set(false)
            return await agent.Games.details(id)
        }
        getGame().then((result) => {
            gameState.set(result)
            document.title = result.data.title
            loadedState.set(true)
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    if (!loaded) return <LoadingModal />

    // @ts-ignore
    // @ts-ignore
    return (
        <>
            {isSummaryOpen ?
                <SummaryModal isOpen={isSummaryOpen} onClose={onSummaryClose} game={game} />

                : ''}
            {isSystemOpen ?
                <SystemRequirementsModal isOpen={isSystemOpen} onClose={onSystemClose} game={game} />

                : ''}
            <Container maxW="container.xl" mt="5">
                <Flex direction={{ base: 'column', md: 'row' }}>
                    <Box p={2} alignSelf={{
                        base: 'center',
                        md: 'start'
                    }}>
                        <Heading as="h1">{game.title}</Heading>
                    </Box>
                    <Spacer />
                    <Stack spacing={[1, 5]} direction={'row'} alignSelf={{
                        base: 'center',
                        md: 'end'
                    }} pb="3">
                        {game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 &&
                            (<ChakraLink href={`steam://run/${game.steamId}`}>
                                <Button variant={'outline'} colorScheme="blue">
                                    <Flex>
                                        <SteamAndDeckLogo size={'1.5em'} />
                                        <Text mt={'1'} ml={'2'}>
                                            Open with Steam <ExternalLinkIcon pb={'1'} />
                                        </Text>
                                    </Flex>
                                </Button>
                            </ChakraLink>)}
                        <Button as={Link} to={`/games/${game._id}/edit`} colorScheme="blue">
                            <Text mt={'1'}>
                                Edit
                            </Text>
                        </Button>
                    </Stack>
                </Flex>
                <Grid
                    gridTemplateColumns={{
                        base: 'auto',
                        md: '3fr 2fr',
                    }}
                    gridTemplateRows={{
                        base: 'auto',
                        lg: 'auto',
                    }}
                    gridTemplateAreas={{
                        base: `'left' 'right'`,
                        md: `'left right'`,
                    }}
                    gap={3}
                >
                    <Flex direction="column" gridArea="left">
                        <Box bg={bg} p="5" rounded="md">
                            <ImageSlider game={game} width={'100%'} />
                        </Box>
                        <Box bg={bg} p="5" mt="3" rounded="md">
                            {isSmallerThan768 ?
                                <Flex width="100%">
                                    <Button colorScheme='blue' size='lg' width='100%' onMouseDown={onSummaryOpen}>
                                        About This Game
                                    </Button>
                                    <Spacer />
                                </Flex>
                                : <Summary game={game} />
                            }
                        </Box>
                    </Flex>
                    <Flex direction="column" gridArea="right">
                        <Box bg={bg} p="5" rounded="md">
                            <Features game={game} />
                        </Box>
                        <Box bg={bg} mt="3" p="5" rounded="md">
                            {isSmallerThan768 ?
                                <Flex width="100%">
                                    <Button colorScheme='blue' size='lg' width='100%' onMouseDown={onSystemOpen}>
                                        System Requirements
                                    </Button>
                                    <Spacer />
                                </Flex>
                                : <SystemRequirements game={game} />
                            }
                        </Box>
                    </Flex>
                </Grid>
            </Container>
        </>
    )
}

export default GameDetails
