bridget/assets/ts/desktop/layout.tsx

// eslint-disable-next-line sort-imports
import { Show, createMemo, createSignal, type JSX } from 'solid-js'

import type { ImageJSON } from '../resources'
import type { Vector } from '../utils'

import { CustomCursor } from './customCursor'
import { Nav } from './nav'
import { Stage } from './stage'
import { StageNav } from './stageNav'

/**
 * interfaces and types
 */

export interface DesktopImage extends HTMLImageElement {
  dataset: {
    hiUrl: string
    hiImgH: string
    hiImgW: string
    loUrl: string
    loImgH: string
    loImgW: string
  }
}

export interface HistoryItem {
  i: number
  x: number
  y: number
}

/**
 * components
 */

export default function Desktop(props: {
  children?: JSX.Element
  ijs: ImageJSON[]
  prevText: string
  closeText: string
  nextText: string
  loadingText: string
}): JSX.Element {
  const [cordHist, setCordHist] = createSignal<HistoryItem[]>([])
  const [isLoading, setIsLoading] = createSignal(false)
  const [isOpen, setIsOpen] = createSignal(false)
  const [isAnimating, setIsAnimating] = createSignal(false)
  const [hoverText, setHoverText] = createSignal('')
  const [navVector, setNavVector] = createSignal<Vector>('none')

  const active = createMemo(() => isOpen() && !isAnimating())
  const cursorText = createMemo(() => (isLoading() ? props.loadingText : hoverText()))

  return (
    <>
      <Nav />
      <Stage
        ijs={props.ijs}
        setIsLoading={setIsLoading}
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        isAnimating={isAnimating}
        setIsAnimating={setIsAnimating}
        cordHist={cordHist}
        setCordHist={setCordHist}
        navVector={navVector}
        setNavVector={setNavVector}
      />
      <Show when={isOpen()}>
        <CustomCursor cursorText={cursorText} active={active} isOpen={isOpen} />
        <StageNav
          prevText={props.prevText}
          closeText={props.closeText}
          nextText={props.nextText}
          loadingText={props.loadingText}
          active={active}
          isAnimating={isAnimating}
          setCordHist={setCordHist}
          isOpen={isOpen}
          setIsOpen={setIsOpen}
          setHoverText={setHoverText}
          navVector={navVector}
          setNavVector={setNavVector}
        />
      </Show>
    </>
  )
}