import React from "react"
import { Box, Center, Flex } from "@chakra-ui/react"
import { Link, useLocation, useNavigate } from "@remix-run/react"

import { Commander } from "../Commander/Commander"
import { CommanderV1 } from "../Commander/CommanderV1"
import { Icon } from "../Icon/Icon"
import { RainbowSkeleton } from "../Skeleton/RainbowSkeleton"
import { ProfileDrawer } from "./ProfileDrawer"

export const Nav = (props) => {
  const [profileDrawerOpen, setProfileDrawerOpen] = React.useState(false)

  const { pathname } = useLocation()

  const navigate = useNavigate()

  const toggleProfileDrawer = React.useCallback(() => {
    setProfileDrawerOpen(!profileDrawerOpen)
  }, [profileDrawerOpen])

  const inEditorMode = React.useMemo(() => {
    if (pathname.slice(0, 7) === "/editor") {
      return true
    }
    return false
  }, [pathname])

  const inEditMode = React.useMemo(() => {
    if (pathname.slice(0, 5) === "/edit") {
      return true
    }
    return false
  }, [pathname])

  const editorToggleable = React.useMemo(() => {
    if (pathname.slice(0, 7) === "/things") {
      return true
    } else if (pathname.slice(0, 5) === "/edit") {
      return true
    }
    return false
  }, [pathname])

  const toggleEdit = React.useCallback(
    (e) => {
      // if first characters of pathname are /things replace with /edit
      // or if first characters of pathname are /edit replace with /things
      if (pathname.slice(0, 7) === "/things") {
        const newPathname = pathname.replace("/things", "/edit")
        navigate(newPathname)
      } else if (pathname.slice(0, 5) === "/edit") {
        const newPathname = pathname.replace("/edit", "/things")
        navigate(newPathname)
      }
    },
    [pathname, navigate]
  )

  const toggleEditor = React.useCallback(
    (e) => {
      // if first characters of pathname are /things replace with /edit
      // or if first characters of pathname are /edit replace with /things
      if (pathname.slice(0, 7) === "/editor") {
        const newPathname = pathname.replace("/editor", "/edit")
        navigate(newPathname)
      } else if (pathname.slice(0, 5) === "/edit") {
        const newPathname = pathname.replace("/edit", "/editor")
        navigate(newPathname)
      }
    },
    [pathname, navigate]
  )

  return (
    <>
      <Box
        position="fixed"
        zIndex={999}
        top={0}
        right={0}
        left={0}
        maxWidth="100vw"
      >
        <Flex
          as="nav"
          position="relative"
          alignItems="center"
          justifyContent="center"
          flexDirection="row"
          width="100%"
          maxWidth="100%"
          marginY={1}
          paddingX="18px"
          paddingY="14px"
          // bg='white'
          // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
        >
          <Center
            className="nav-left-section"
            display={["none", "flex"]}
            height="100%"
            marginRight="auto"
          >
            <Center transform="scaleX(-100%)" cursor="pointer">
              <Link to="/">
                <Icon size="12px" name="unicorn"></Icon>
              </Link>
            </Center>
          </Center>
          <CommanderV1 global id="nav" rainbow={false}></CommanderV1>
          <Center
            className="nav-right-section"
            columnGap={[3, 8]}
            height="100%"
            marginLeft="auto"
          >
            {editorToggleable && (
              <Center
                // transform="scaleX(-100%)"
                cursor="pointer"
                onClick={toggleEditor}
              >
                <Icon
                  chakras={{
                    opacity: inEditorMode ? 1 : 0.3,
                  }}
                  size="12px"
                  name="two eyes"
                ></Icon>
                {/* <Icon
                  size="12px"
                  name={inEditorMode ? "glowing star" : "star"}
                ></Icon> */}
              </Center>
            )}
            {editorToggleable && (
              <Center
                transform="scaleX(-100%)"
                cursor="pointer"
                onClick={toggleEdit}
              >
                <Icon
                  chakras={{
                    opacity: inEditMode ? 1 : 0.3,
                  }}
                  size="12px"
                  name="paint"
                ></Icon>
                {/* <Icon
                  size="12px"
                  name={inEditMode ? "glowing star" : "star"}
                ></Icon> */}
              </Center>
            )}
            <Center transform={["", "scaleX(-100%)"]} cursor="pointer">
              <Icon size="12px" name="rainbow"></Icon>
            </Center>
            <Center display={["flex", "none"]} cursor="pointer">
              <Link to="/">
                <Icon size="12px" name="unicorn"></Icon>
              </Link>
            </Center>
          </Center>
          {/* <RainbowSkeleton
            marginLeft="auto"
            width="25px"
            height="25px"
            cursor="pointer"
            onClick={toggleProfileDrawer}
            background="rgba(0,0,0,0.1)"
            sx={{}}
            borderRadius="999px"
          ></RainbowSkeleton> */}
          {/* <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
          <RainbowSkeleton></RainbowSkeleton> */}
        </Flex>
      </Box>
      {/* <ProfileDrawer isOpen={profileDrawerOpen}></ProfileDrawer> */}
    </>
  )
}