/* eslint-disable no-underscore-dangle */
/* eslint-disable import/no-extraneous-dependencies */
import { AdaptiveDpr, AdaptiveEvents, Html, Loader, Preload } from
'@react-three/drei'
import { Canvas, RootState } from '@react-three/fiber'
import { Leva } from 'leva'
import { Perf } from 'r3f-perf'
import { Suspense, memo, useCallback } from 'react'
import styled from 'styled-components'
import { isDevelopment } from '~/constants'
import { useAppStore } from '~/stores/useAppStore'
import { useControlStore } from '~/stores/useControlStore'
import { useDataStore } from '~/stores/useDataStore'
import { useGraphStore } from '~/stores/useGraphStore'
import { addToGlobalForE2e } from '~/utils/tests'
import { UniverseQuestion } from '../App/UniverseQuestion'
import { Flex } from '../common/Flex'
import { initialCameraPosition, selectionGraphCameraPosition } from
'./Controls/CameraAnimations/constants'
import { CursorTooltip } from './CursorTooltip/index'
import { GraphSearch } from './GraphSearch'
import { Overlay } from './Overlay'
import { Preloader } from './Preloader'
import { SelectionContent } from './SelectionContent'
const Fallback = () => (
<Html>
<Loader />
</Html>
)
// const Content = () => {
// const { universeColor } = useControls('universe', {
// universeColor: [Link],
// })
// const dataInitial = useDataStore((s) => [Link])
// const selectedNode = useSelectedNode()
// const outlineColor: number = useMemo(
// () => (selectedNode?.node_type ? (getNodeColorByType(selectedNode.node_type)
as number) : outlineEffectColor),
// [selectedNode],
// )
// return (
// <>
// <color args={[colors.BLUE_PRESS_STATE || universeColor]}
attach="transparent" />
// <Lights />
// <Controls />
// <Selection>
// {false && (
// <EffectComposer autoClear={false} multisampling={8}>
// <Vignette darkness={0.7} eskil={false} offset={0.05} />
// <Bloom
// luminanceThreshold={1} // luminance threshold. Raise this value to
mask out darker elements in the scene.
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore
// mipmapBlur
// resolutionX={Resolution.AUTO_SIZE} // The horizontal resolution.
// resolutionY={Resolution.AUTO_SIZE} // The vertical resolution.
// />
// <Outline
// blendFunction={[Link]} // set this to
[Link] for dark outlines
// blur
// edgeStrength={4}
// hiddenEdgeColor={outlineColor}
// visibleEdgeColor={outlineColor} // the color of visible edges
// />
// </EffectComposer>
// )}
// {dataInitial?.nodes?.length ? <Graph /> : null}
// </Selection>
// </>
// )
// }
let wheelEventTimeout: ReturnType<typeof setTimeout> | null = null
const cameraProps = {
aspect: [Link] / [Link],
far: 30000,
near: 1,
position: [initialCameraPosition.x, initialCameraPosition.y,
initialCameraPosition.z],
} as const
const _Universe = () => {
const [setIsUserScrollingOnHtmlPanel, setIsUserScrolling, setUserMovedCamera] = [
useControlStore((s) => [Link]),
useControlStore((s) => [Link]),
useControlStore((s) => [Link]),
]
const showSelectionGraph = useGraphStore((s) => [Link])
const isLoading = useDataStore((s) => [Link])
const universeQuestionIsOpen = useAppStore((s) => [Link])
const onWheelHandler = useCallback(
(e: [Link]) => {
const { target } = e
const { offsetParent } = target as HTMLDivElement
if (wheelEventTimeout) {
clearTimeout(wheelEventTimeout)
}
if (offsetParent?.classList?.contains('html-panel')) {
// if overflowing on y, disable camera controls to scroll on div
if ([Link] < [Link]) {
setIsUserScrollingOnHtmlPanel(true)
}
}
setIsUserScrolling(true)
setUserMovedCamera(true)
wheelEventTimeout = setTimeout(() => {
setIsUserScrolling(false)
setIsUserScrollingOnHtmlPanel(false)
}, 200)
},
[setIsUserScrolling, setIsUserScrollingOnHtmlPanel, setUserMovedCamera],
)
const onCreatedHandler = useCallback((s: RootState) => addToGlobalForE2e(s,
'threeState'), [])
return (
<Wrapper>
<Suspense fallback={null}>
<Leva hidden isRoot />
<Canvas
camera={cameraProps}
frameloop={showSelectionGraph ? 'demand' : 'always'}
id="universe-canvas"
onCreated={onCreatedHandler}
onWheel={onWheelHandler}
>
{isDevelopment && <Perf position="top-right" style={{ top: '80px' }} />}
<Suspense fallback={<Fallback />}>
<Preload />
<AdaptiveDpr />
<AdaptiveEvents />
<Html fullscreen>
<Text>Hello</Text>
</Html>
{/* <Content /> */}
</Suspense>
</Canvas>
<GraphSearch />
<CursorTooltip />
{showSelectionGraph ? (
<SelectionWrapper>
<Canvas
camera={{
...cameraProps,
position: [
selectionGraphCameraPosition.x,
selectionGraphCameraPosition.y,
selectionGraphCameraPosition.z,
],
}}
id="selection-canvas"
onCreated={({ gl }) => {
[Link]('#000000')
[Link](0.8)
}}
>
{isDevelopment && <Perf position="top-right" style={{ top:
'80px' }} />}
<Suspense fallback={<Fallback />}>
<AdaptiveDpr />
<AdaptiveEvents />
<SelectionContent />
</Suspense>
</Canvas>
</SelectionWrapper>
) : null}
</Suspense>
{universeQuestionIsOpen && <UniverseQuestion />}
{isLoading && <Preloader fullSize={false} />}
<Overlay />
</Wrapper>
)
}
const Wrapper = styled(Flex)`
flex: 1 1 100%;
position: relative;
`
const SelectionWrapper = styled(Flex)`
position: absolute;
inset: 0;
`
const Text = styled.p`
color: white;
z-index: 1001;
position: absolute;
top: 100%;
left: 100%;
transform: translate(-50%, -50%);
font-size: 24px;
pointer-events: none;
user-select: none;
`
export const Universe = memo(_Universe)
