import React from "react"
import ClickAwayListener from "react-click-away-listener"
import { Center, Flex, Input } from "@chakra-ui/react"
import Fuse from "fuse.js"
import { Rainbow } from "../Rainbow/Rainbow"
import { Thingtime } from "../Thingtime/Thingtime"
import { useThingtime } from "../Thingtime/useThingtime"
import { sanitise } from "~/functions/sanitise"
import { getParentPath } from "~/smarts"
export const Commander = (props) => {
const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } =
useThingtime()
const inputRef = React.useRef()
const [inputValue, setInputValue] = React.useState("")
const [virtualValue, setVirtualValue] = React.useState("")
const [hoveredSuggestion, setHoveredSuggestion] = React.useState()
const [active, setActive] = React.useState(false)
const [contextPath, setContextPath] = React.useState()
const [showContext, setShowContextState] = React.useState(false)
const mobileVW = React.useMemo(() => {
return "calc(100vw - 55px)"
}, [])
const rainbowRepeats = 2
const setShowContext = React.useCallback(
(value, from?: string) => {
setShowContextState(value)
},
[setShowContextState]
)
// const [suggestions, setSuggestions] = React.useState([])
const contextValue = React.useMemo(() => {
// TODO: Figure out why this is running on every click
const ret = getThingtime(contextPath)
return ret
}, [contextPath, getThingtime])
const commanderActive = React.useMemo(() => {
return thingtime?.settings?.commanderActive
}, [thingtime?.settings?.commanderActive])
console.log("nik commanderActive", commanderActive)
// commanderActive useEffect
React.useEffect(() => {
if (commanderActive) {
inputRef?.current?.focus?.()
} else {
document.activeElement.blur()
if (thingtimeRef?.current?.settings?.clearCommanderOnToggle) {
setInputValue("")
setHoveredSuggestion(null)
}
if (thingtimeRef?.current?.settings?.clearCommanderContextOnToggle) {
setShowContext(false, "commanderActive useEffect")
}
if (contextPath !== undefined) {
setContextPath(undefined)
}
if (showContext !== false) {
setShowContext(false)
}
}
}, [
commanderActive,
thingtimeRef,
setShowContext,
inputValue,
contextPath,
showContext,
])
const onInputChange = React.useCallback((e) => {
setInputValue(e.target.value)
setHoveredSuggestion(null)
}, [])
const validSetters = React.useMemo(() => {
return ["=", " is "]
}, [])
const command = React.useMemo(() => {
// const sanitizedCommand = sanitise(value)
// const sanitizedCommand = inputValue
const sanitizedCommand = virtualValue
if (sanitizedCommand?.includes(validSetters[0])) {
const indexOfSplitter = sanitizedCommand?.indexOf(validSetters[0])
const [pathRaw, valRaw] = [
sanitizedCommand?.slice(0, indexOfSplitter),
sanitizedCommand?.slice(indexOfSplitter + validSetters[0]?.length),
]
return [pathRaw?.trim(), valRaw?.trim()]
} else if (sanitizedCommand?.includes(validSetters[1])) {
const indexOfSplitter = sanitizedCommand?.indexOf(validSetters[1])
const [pathRaw, valRaw] = [
sanitizedCommand?.slice(0, indexOfSplitter),
sanitizedCommand?.slice(indexOfSplitter + validSetters[1]?.length),
]
return [pathRaw?.trim(), valRaw?.trim()]
}
console.log("nik sanitizedCommand", sanitizedCommand)
return [sanitizedCommand]
}, [
// inputValue,
virtualValue,
validSetters,
])
const commandPath = React.useMemo(() => {
return command?.[0]
// return sanitise(command?.[0])
}, [command])
const commandValue = React.useMemo(() => {
return command?.[1]
}, [command])
const validQuotations = React.useMemo(() => {
return ['"', "'"]
}, [])
const escapedCommandValue = React.useMemo(() => {
// replace quotations with escaped quoations except for first and last quotation
const startingQuotation = commandValue?.[0]
const endingQuotation = commandValue?.[commandValue?.length - 1]
const isQuoted =
validQuotations?.includes(startingQuotation) &&
validQuotations?.includes(endingQuotation)
const restOfCommandValue = isQuoted
? commandValue?.slice(1, commandValue?.length - 1)
: commandValue
const escaped = restOfCommandValue
?.replace(/"/g, '\\"')
?.replace(/'/g, "\\'")
const ret = `"${escaped}"`
return ret
}, [commandValue, validQuotations])
const commandIsAction = React.useMemo(() => {
return commandPath && commandValue
}, [commandPath, commandValue])
const showSuggestions = React.useMemo(() => {
return inputValue?.length
}, [inputValue])
const suggestions = React.useMemo(() => {
const fuse = new Fuse(paths)
const results = fuse.search(inputValue)
const mappedResults = results?.map((result) => {
return result?.item
})
return mappedResults
}, [inputValue, paths])
const selectSuggestion = React.useCallback(
(suggestionIdx) => {
const suggestion = suggestions?.[suggestionIdx]
setInputValue(suggestion)
setHoveredSuggestion(null)
setContextPath(suggestion)
setShowContext(true, "Select suggestion")
},
[setInputValue, setContextPath, setShowContext, suggestions]
)
const commandContainsPath = React.useMemo(() => {
console.log("nik command", commandPath)
console.log("nik suggestions", suggestions)
const commandIncludesSuggestion = suggestions?.find((suggestion) => {
return commandPath?.includes(suggestion)
})
console.log("nik commandIncludesSuggestion", commandIncludesSuggestion)
// return false
return commandIncludesSuggestion
}, [commandPath, suggestions])
const openCommander = React.useCallback(() => {
console.log("nik commander opening commander")
setThingtime("settings.commanderActive", true)
}, [setThingtime])
const closeCommander = React.useCallback(
(e?: any) => {
console.log("nik e", e)
if (thingtime?.settings?.commanderActive) {
console.log("nik commander closing commander")
console.log("nik setting commanderActive to false")
setThingtime("settings.commanderActive", false)
}
},
[setThingtime, thingtime?.settings?.commanderActive]
)
const toggleCommander = React.useCallback(() => {
if (thingtime?.settings?.commanderActive) {
closeCommander()
} else {
openCommander()
}
}, [thingtime?.settings?.commanderActive, closeCommander, openCommander])
const allCommanderKeyListener = React.useCallback(
(e: any) => {
console.log("commander key listener e?.code", e?.code)
if (e?.metaKey && e?.code === "KeyP") {
e.preventDefault()
e.stopPropagation()
toggleCommander()
}
// if key escape close all modals
else if (e?.code === "Escape") {
closeCommander()
}
// if arrow keys then move selection
else if (e?.code === "ArrowUp") {
// move selection up
const curSuggestionIdx =
typeof hoveredSuggestion === "number"
? hoveredSuggestion
: suggestions?.length
const newSuggestionIdx = curSuggestionIdx - 1
if (newSuggestionIdx >= 0) {
setHoveredSuggestion(newSuggestionIdx)
} else {
setHoveredSuggestion(suggestions?.length - 1)
}
} else if (e?.code === "ArrowDown") {
// move selection down
const curSuggestionIdx =
typeof hoveredSuggestion === "number" ? hoveredSuggestion : -1
const newSuggestionIdx = curSuggestionIdx + 1
if (newSuggestionIdx < suggestions?.length) {
setHoveredSuggestion(newSuggestionIdx)
} else {
setHoveredSuggestion(0)
}
} else if (e?.code === "Enter") {
// if selection is active then select it
const curSuggestionIdx = hoveredSuggestion
if (curSuggestionIdx !== null) {
selectSuggestion(curSuggestionIdx)
}
if (commanderActive) {
try {
console.log("nik Commander onEnter")
console.log("nik commandIsAction", commandIsAction)
console.log("nik commandContainsPath", commandContainsPath)
console.log("nik onEnter commandPath", commandPath)
if (commandIsAction) {
// nothing
try {
const fn = `() => { return ${escapedCommandValue} }`
const evalFn = eval(fn)
const realVal = evalFn()
const prevVal = getThingtime(commandPath)
const parentPath = getParentPath(commandPath)
setThingtime(commandPath, realVal)
if (!prevVal) {
setContextPath(parentPath)
setShowContext(true, "commandIsAction check")
}
} catch (err) {
console.log("setThingtime errored in Commander", err)
}
} else if (commandContainsPath) {
// const prevValue = getThingtime(commandPath)
// const newValue = setThingtime(commandPath, prevValue)
console.log("Setting context path", commandPath)
setContextPath(commandPath)
setShowContext(true, "commandContainsPath check")
}
} catch (err) {
console.error("Caught error on commander onEnter", err)
}
}
}
},
[
closeCommander,
toggleCommander,
hoveredSuggestion,
selectSuggestion,
suggestions,
commanderActive,
commandIsAction,
commandContainsPath,
commandPath,
escapedCommandValue,
getThingtime,
setThingtime,
setShowContext,
]
)
React.useEffect(() => {
window.addEventListener("keydown", allCommanderKeyListener)
return () => {
window.removeEventListener("keydown", allCommanderKeyListener)
}
}, [allCommanderKeyListener])
React.useEffect(() => {
if (typeof hoveredSuggestion === "number") {
setVirtualValue(suggestions?.[hoveredSuggestion])
} else {
setVirtualValue(inputValue)
}
}, [hoveredSuggestion, inputValue, suggestions])
React.useEffect(() => {
setVirtualValue(inputValue)
}, [inputValue])
return (
<ClickAwayListener onClickAway={closeCommander}>
<Flex
position="absolute"
top={0}
right={0}
// zIndex={99999}
// position='fixed'
// top='100px'
left={0}
justifyContent={["flex-start", "center"]}
// display={["flex", commanderActive ? "flex" : "none"]}
maxWidth="100%"
height={12}
// height="100%"
pointerEvents="none"
id="commander"
paddingX={1}
>
<Flex
position="absolute"
top="100%"
right={0}
left={0}
alignItems={["flex-start", "center"]}
flexDirection="column"
overflowY="scroll"
maxWidth="100%"
height="auto"
maxHeight="90vh"
marginTop={2}
borderRadius="12px"
marginX={1}
>
<Flex
flexDirection="column"
display={showSuggestions ? "flex" : "none"}
width={["100%", "400px"]}
maxWidth="100%"
marginBottom={3}
background="grey"
borderRadius="12px"
pointerEvents="all"
id="commander-suggestions"
onMouseLeave={() => setHoveredSuggestion(null)}
paddingY={3}
>
{suggestions?.map((suggestion, i) => {
return (
<Flex
key={i}
background={hoveredSuggestion === i ? "greys.lightt" : null}
_hover={{
background: "greys.lightt",
}}
cursor="pointer"
onClick={() => selectSuggestion(i)}
onMouseEnter={() => setHoveredSuggestion(i)}
paddingX={4}
>
{suggestion}
</Flex>
)
})}
</Flex>
<Flex
display={showContext ? "flex" : "none"}
maxWidth="100%"
background="grey"
borderRadius="12px"
pointerEvents="all"
paddingY={3}
>
<Thingtime thing={contextValue}></Thingtime>
</Flex>
</Flex>
<Center
position="relative"
width={["100%", "400px"]}
maxWidth={[mobileVW, "100%"]}
height="100%"
>
<Rainbow
filter="blur(15px)"
opacity={commanderActive ? 0.25 : 0}
repeats={rainbowRepeats}
thickness={8}
opacityTransition="all 1000ms ease"
overflow="visible"
>
<Center
position="relative"
overflow="hidden"
width={["100%", "400px"]}
maxWidth={[mobileVW, "100%"]}
height="100%"
padding="1px"
borderRadius="6px"
pointerEvents="all"
outline="none"
>
<Rainbow
opacity={commanderActive ? 0.6 : 0}
position="absolute"
repeats={rainbowRepeats}
opacityTransition="all 2500ms ease"
thickness={10}
></Rainbow>
<Input
// display='none'
// opacity={0}
ref={inputRef}
sx={{
"&::placeholder": {
color: "greys.dark",
},
}}
width="100%"
height="100%"
background="grey"
border="none"
borderRadius="5px"
outline="none"
onChange={onInputChange}
onFocus={openCommander}
placeholder="Imagine.."
value={inputValue}
></Input>
</Center>
</Rainbow>
</Center>
</Flex>
</ClickAwayListener>
)
}
Reference in New Issue View Git Blame Copy Permalink