import React, { useState as reactUseState } from 'react'
import { Badge, Box, Divider, Flex, Heading, Link, Text } from '@chakra-ui/react'
import { Data } from '../../models/game'
import { gameDashboardState } from '../../stateManagement/gameState'
import { ImmutableObject, useHookstate } from '@hookstate/core'
import { loadingState, showFiltersModuleState } from '../../stateManagement/loadingState'
import { useNavigate } from 'react-router-dom'
import { adminMode } from '../../stateManagement/userState'
import getWithFilters from '../../componentUtils/getWithFilters'
import { ChangeActiveFilterHeader } from "../../componentUtils/changeActiveFilterHeader";
import GameRating from "./GameRating";
import GamePlayStatus from "./GamePlayStatus";
import { ratingState, steamRatingState } from "../../stateManagement/ratingState";
import { BiSave } from "react-icons/bi";
import { BsPencil } from "react-icons/bs";

interface Props {
    game: ImmutableObject<Data>
}

export default function Features({ game }: Props) {
    const gamesState = useHookstate(gameDashboardState)
    const games = gamesState.get()
    const setShowFiltersModuleState = useHookstate(showFiltersModuleState)
    const loadedState = useHookstate(loadingState)
    const admin = useHookstate(adminMode).get()
    const history = useNavigate()
    const [editMode, setEditMode] = reactUseState(false)
    const [playState, setPlayState] = reactUseState(game.accessedBy[0].playStatus);
    const useRatingState = useHookstate(ratingState).get()
    const useSteamRatingState = useHookstate(steamRatingState).get()

    const handleOnClick = async () => {
        await ChangeActiveFilterHeader(games.filters, games.searchParams, setShowFiltersModuleState)
        await getWithFilters(gamesState, loadedState, admin, games.count.currentPage, games.count.limit, games.searchParams, games.filters, useRatingState, useSteamRatingState)
        return history('/games')
    }

    return (
        <Box mb="3">
            <Heading as="h3" size="lg">Features and Information</Heading>
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Rating:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <GameRating game={game} size={'1.5em'} />
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            {game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 &&
                (<>
                    <Flex direction="column" m="2">
                        <Box>
                            <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                                <Text pt="1" fontSize="sm">
                                    Steam ID:
                                </Text>
                            </Badge>
                        </Box>
                        <Box mt="1.5" ml="5" mr="2">
                            <Link pt="1" href={`steam://run/${game.steamId}`}>{game.steamId}</Link>
                        </Box>
                    </Flex>
                    <Divider orientation="horizontal" />
                </>)}
            {game.series.length > 1 &&
                (<>
                    <Flex direction="column" m="2">
                        <Box>
                            <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                                <Text pt="1" fontSize="sm">
                                    Series:
                                </Text>
                            </Badge>
                        </Box>
                        <Box mt="1.5" ml="5" mr="2">
                            <Link onMouseDown={() => {
                                gamesState.filters.series.set(game.series)
                                handleOnClick()
                            }} pt="1">{game.series}</Link>
                        </Box>
                    </Flex>
                    <Divider orientation="horizontal" />
                </>)}
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Play Status:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Box display={'flex'}>
                        {editMode ?
                            <Box display={'flex'}>
                                <GamePlayStatus game={game} playState={playState} setPlayState={setPlayState} />
                                <Link ml={'1'} mt={'1'} onMouseDown={() => setEditMode(!editMode)}>
                                    <BiSave size={'1.5rem'} />
                                </Link>
                            </Box>
                            :
                            <Box display={'flex'}>
                                <Link mr={'5px'} onMouseDown={() => {
                                    gamesState.filters.playStatus.set(game.accessedBy[0].playStatus)
                                    handleOnClick()
                                }} pt="1">
                                    {playState}
                                </Link>
                                <Link mt={'1.5'} onMouseDown={() => setEditMode(!editMode)}>
                                    <BsPencil />
                                </Link>
                            </Box>
                        }
                    </Box>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Genre:
                        </Text>
                    </Badge>
                </Box>
                <Box mt={'2'} ml={'4'}>
                    {game.genre.map((genre, index) => [
                        index > 0 && ", ",
                        <Link key={index} onMouseDown={() => {
                            gamesState.filters.genre.set(genre)
                            handleOnClick()
                        }}>
                            {genre}
                        </Link>
                    ])}
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Operating Systems:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Text pt="1">
                        {Object.keys(game.os).filter(os => {
                            //@ts-ignore
                            return game.os[os]
                        }).map((os, index) => {
                            const osStr = []
                            index > 0 && osStr.push(', ')
                            if (os === 'mac') osStr.push(<Link key={index} onMouseDown={() => {
                                gamesState.filters.os.set(os)
                                handleOnClick()
                            }}>Mac OSX</Link>)
                            else if (os === 'ios') osStr.push(<Link key={index} onMouseDown={() => {
                                gamesState.filters.os.set(os)
                                handleOnClick()
                            }}>iOS</Link>)
                            else osStr.push(<Link key={index} onMouseDown={() => {
                                gamesState.filters.os.set(os)
                                handleOnClick()
                            }}>{os.charAt(0).toUpperCase() + os.slice(1)}</Link>)
                            return osStr
                        })}
                    </Text>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Store:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    {game.accessedBy[0].store.map((store, index) => [
                        index > 0 && ", ",
                        <Link key={index} onMouseDown={() => {
                            gamesState.filters.store.set(store)
                            handleOnClick()
                        }}>
                            {store}
                        </Link>
                    ])}
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Developer:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    {game.developer.map((developer, index) => [
                        index > 0 && ", ",
                        <Link key={index} onMouseDown={() => {
                            gamesState.filters.developer.set(developer)
                            handleOnClick()
                        }}>
                            {developer}
                        </Link>
                    ])}
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Publisher:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    {game.publisher.map((publisher, index) => [
                        index > 0 && ", ",
                        <Link key={index} onMouseDown={() => {
                            gamesState.filters.publisher.set(publisher)
                            handleOnClick()
                        }}>
                            {publisher}
                        </Link>
                    ])}
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Controller Support:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Link onMouseDown={() => {
                        gamesState.filters.controller.set(game.controller)
                        handleOnClick()
                    }} pt="1">{game.controller}</Link>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Release Date:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Text pt="1">{game.releaseDate}</Text>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Soundtrack:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Link onMouseDown={() => {
                        gamesState.filters.soundtrack.set(game.accessedBy[0].soundtrack)
                        handleOnClick()
                    }} pt="1">{game.accessedBy[0].soundtrack}</Link>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Does it work with Intel?:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Link onMouseDown={() => {
                        gamesState.filters.intel.set(game.intel)
                        handleOnClick()
                    }} pt="1">{game.intel}</Link>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
            <Flex direction="column" m="2">
                <Box>
                    <Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
                        <Text pt="1" fontSize="sm">
                            Does it work with WINE?:
                        </Text>
                    </Badge>
                </Box>
                <Box mt="1.5" ml="5" mr="2">
                    <Link onMouseDown={() => {
                        gamesState.filters.wine.set(game.wine)
                        handleOnClick()
                    }} pt="1">{game.wine}</Link>
                </Box>
            </Flex>
            <Divider orientation="horizontal" />
        </Box>
    )
}
