import React, { useState } from "react";
import {
    Link, Box, Flex, Button, Image, Stack, IconButton,
    useColorMode, useColorModeValue
} from "@chakra-ui/react";
import { SunIcon, MoonIcon, HamburgerIcon, CloseIcon, SearchIcon, AddIcon } from "@chakra-ui/icons";

import logo from "../assets/wAIfu_20flag_20square.png";

// Navbar component code based on https://codesandbox.io/s/b22b7

const NavBar = () => {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => setIsOpen(!isOpen);

    const logoBorderColor = useColorModeValue("var(--flag-color-dark-blue)", "var(--chakra-colors-whiteAlpha-800)");

    return (
        <NavBarContainer boxShadow="base" p="1rem">
            <Link href="/" boxSize="min(48px, 100%)">
                <Image
                    borderRadius="full"
                    height="100%"
                    border="2px"
                    borderColor={logoBorderColor}
                    src={logo}
                    alt="wAIfu flag logo"
                />
            </Link>
            
            <Stack direction="row">
                <Box display={{ base: "block", md: "none"}}>
                    <ColorThemeSwitch />
                </Box>
                <NavToggle toggle={toggle} isOpen={isOpen} />
            </Stack>
            <NavMenu isOpen={isOpen} />
        </NavBarContainer>
    );
};

const NavToggle = ({ toggle, isOpen }) => {
    return (
        <IconButton
            display={{ base: "block", md: "none" }}
            height="auto"
            colorScheme="gray"
            color="gray.400"
            bg="#ffffff00"
            size="lg"
            aria-label="Navigation menu toggle"
            icon={isOpen ? <CloseIcon height="100%" /> : <HamburgerIcon height="100%" />}
            onClick={toggle}>
        </IconButton>
    );
};

const NavItem = ({ children, to = "/", ...rest}) => {
    return (
        <Link href={to} {...rest}>
            {children}
        </Link>
    );
};

const NavMenu = ({ isOpen }) => {
    return (
        <Box
            display={{ base: isOpen ? "block" : "none", md: "block" }}
            flexBasis={{ base: "100%", md: "auto" }}
            height="min(48px, 100%)"
        >
            <Stack
                spacing={8}
                align="center"
                justify={["center", "center", "flex-end", "flex-end"]}
                direction={["column", "row", "row", "row"]}
                pt={[4, 4, 0, 0]}
                height="100%"
            >
                <NavItem to="/search">
                    <Button as={SearchIcon} bg="#ffffff00" boxSize="3.12rem" />
                </NavItem>
                <NavItem to="/create">
                    <Button as={AddIcon} bg="#ffffff00" boxSize="3.12rem" />
                </NavItem>
                <NavItem to="/about">About</NavItem>
                <Box display={{ base: "none", md: "block"}}>
                    <ColorThemeSwitch />
                </Box>
                <NavItem to="/signup">
                    <Button size="sm" rounded="md">
                        Sign Up
                    </Button>
                </NavItem>
            </Stack>
        </Box>
    );
};

const NavBarContainer = ({ children, ...props }) => {
    return (
        <Flex
            as="nav"
            align="center"
            justify="space-between"
            wrap="wrap"
            width="100%"
            mb={8}
            p={8}
            {...props}
        >
            {children}
        </Flex>
    );
};

const ColorThemeSwitch = ({ ...props }) => {
    const { colorMode, toggleColorMode } = useColorMode();
    return (
        <IconButton
            colorScheme="gray"
            color="gray.400"
            bg="#ffffff00"
            size="lg"
            aria-label="Switch color themes"
            icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
            onClick={() => {
                document.body.style.background = "";
                toggleColorMode();
            }}
            {...props}>
        </IconButton>
    );
}

export default NavBar;