import { isMobile } from '../lib/simpleUtils'
import useLongPress from './reactUtils'
import { renderToDom } from '@zardoy/react-util'
import { useEffect, useState } from 'react'
import { proxy, useSnapshot } from 'valtio'
import { Vec3 } from 'vec3'
import { MobileControls } from './mobileControls'

export const playgroundGlobalUiState = proxy({
  scenes: [] as string[],
  selected: '',
  selectorOpened: false,
  actions: {} as Record<string, () => void>
})

renderToDom(<Playground />, {
  strictMode: false,
  selector: '#react-root'
})

function Playground() {
  useEffect(() => {
    const style = document.createElement('style')
    style.innerHTML = /* css */ `
      .lil-gui {
        top: 60px !important;
        right: 0 !important;
      }
    `
    document.body.appendChild(style)

    // Hide the loading overlay once the playground UI is ready
    const loadingOverlay = document.getElementById('loading')
    if (loadingOverlay) {
      loadingOverlay.classList.add('hidden')
    }

    return () => {
      style.remove()
    }
  }, [])

  return (
    <div
      style={{
        fontFamily: 'monospace',
        color: 'white'
      }}
    >
      <Controls />
      <SceneSelector />
      <ActionsSelector />
    </div>
  )
}

function SceneSelector() {
  const mobile = isMobile()
  const { scenes, selected } = useSnapshot(playgroundGlobalUiState)
  const [hidden, setHidden] = useState(false)
  const longPressEvents = useLongPress(
    () => {
      playgroundGlobalUiState.selectorOpened = true
    },
    () => {}
  )

  if (hidden) return null

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        display: 'flex',
        alignItems: 'flex-start',
        zIndex: 1
      }}
      {...longPressEvents}
    >
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {scenes.map(scene => (
          <div
            key={scene}
            style={{
              padding: mobile ? '5px' : '2px 5px',
              cursor: 'pointer',
              userSelect: 'none',
              background: scene === selected ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.6)',
              fontWeight: scene === selected ? 'bold' : 'normal'
            }}
            onClick={() => {
              const qs = new URLSearchParams(window.location.search)
              qs.set('scene', scene)
              location.search = qs.toString()
            }}
          >
            {scene}
          </div>
        ))}
      </div>
      <div
        style={{
          padding: mobile ? '5px' : '2px 5px',
          cursor: 'pointer',
          userSelect: 'none',
          background: 'rgba(0, 0, 0, 0.6)',
          fontSize: '14px',
          lineHeight: '1'
        }}
        onClick={() => setHidden(true)}
      >
        ×
      </div>
    </div>
  )
}

const ActionsSelector = () => {
  const { actions, selectorOpened } = useSnapshot(playgroundGlobalUiState)

  if (!selectorOpened) return null
  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(0, 0, 0, 0.5)',
        zIndex: 10,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 5,
        fontSize: 24
      }}
    >
      {Object.entries({
        ...actions,
        Close() {
          playgroundGlobalUiState.selectorOpened = false
        }
      }).map(([name, action]) => (
        <div
          key={name}
          style={{
            padding: '2px 5px',
            cursor: 'pointer',
            userSelect: 'none',
            background: 'rgba(0, 0, 0, 0.5)'
          }}
          onClick={() => {
            action()
            playgroundGlobalUiState.selectorOpened = false
          }}
        >
          {name}
        </div>
      ))}
    </div>
  )
}

const Controls = () => {
  return <MobileControls />
}