import React from "react"
// import { Sticky, StickyContainer } from "react-sticky"
import Sticky from "react-sticky-el"
import { Box, Flex } from "@chakra-ui/react"
import { useLocation, useMatches } from "@remix-run/react"

import { Thingtime } from "./Thingtime"
import { useThingtime } from "./useThingtime"

export const ThingtimeURL = (props) => {
  const { getThingtime } = useThingtime()

  const { pathname } = useLocation()

  const matches = useMatches()
  const location = React.useMemo(() => {
    return matches[matches.length - 1]
  }, [matches])

  const path = React.useMemo(() => {
    console.log("ThingtimeURL location", location)

    // const sanitisation = ["/things", "/edit", "/editor", "/code", "/coder"]

    // // strip the leading /path1/path2 path1 section from the path
    // let pathPartOne = location?.pathname?.split("/")[2]

    // // remove all sanitsation strings from path
    // sanitisation.forEach((sanitisationString) => {
    //   pathPartOne = pathPartOne?.replace(sanitisationString, "")
    // })

    // strip the leading /path1/path2 path1 section from the path
    const pathPartOne = location?.pathname?.split("/")[2]

    const path = pathPartOne?.replace(/\//g, ".")

    return path || "thingtime"
  }, [location])

  const thing = React.useMemo(() => {
    // remove /things/ from path

    const ret = getThingtime(path)

    return ret
  }, [path, getThingtime])

  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 containerRef = React.useRef(null)
  const editorRef = React.useRef(null)

  React.useEffect(() => {
    const scrollListener = () => {
      if (containerRef?.current?.getBoundingClientRect) {
        const { top } = containerRef?.current?.getBoundingClientRect()

        editorRef.current.style.top = `${-top}px`
      }
    }

    window.addEventListener("scroll", scrollListener)

    return () => {
      window.removeEventListener("scroll", scrollListener)
    }
  }, [])

  return (
    <Flex
      ref={containerRef}
      // position="sticky"
      position="relative"
      alignItems={inEditorMode ? "flex-start" : "center"}
      justifyContent="center"
      // overflow="scroll"
      // height="auto"
      flexDirection={inEditorMode ? "row" : "column"}
      maxWidth="100%"
      // maxHeight="100vh"
    >
      {inEditorMode && (
        <Box
          ref={editorRef}
          position="relative"
          // position="sticky"
          // top={200}
          // alignSelf="flex-start"
          overflow="scroll"
          width="600px"
          // width="100%"
          maxHeight="100vh"
          // paddingY={2}
        >
          <Thingtime
            path={path}
            thing={thing}
            render
            chakras={{ marginY: "200px" }}
            // width="600px"
          ></Thingtime>
        </Box>
      )}
      <Thingtime
        edit={inEditMode}
        path={path}
        thing={thing}
        chakras={{ marginY: "200px" }}
        width="600px"
      ></Thingtime>
    </Flex>
  )
}
