import React from "react"
import { Flex } from "@chakra-ui/react"
import { useMatches } from "@remix-run/react"

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

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

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

  const path = React.useMemo(() => {
    const pathPartOne = location?.params?.["*"]

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

    return path
  }, [location])

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

    const ret = getThingtime(path)

    return ret
  }, [path, getThingtime])

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      maxWidth="100%"
    >
      <Thingtime
        edit={props?.edit}
        path={path}
        thing={thing}
        chakras={{ marginY: 200 }}
        width="600px"
      ></Thingtime>
    </Flex>
  )
}