import getStudio from '@theatre/studio/getStudio'
import {usePrism, useVal} from '@theatre/react'
import {val} from '@theatre/dataverse'
import React, {useEffect} from 'react'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import PanelsRoot from './PanelsRoot'
import ProvideTheme from './ProvideTheme'
import GlobalToolbar from '@theatre/studio/toolbars/GlobalToolbar/GlobalToolbar'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {PortalContext} from 'reakit'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import useKeyboardShortcuts from './useKeyboardShortcuts'
import PointerEventsHandler from '@theatre/studio/uiComponents/PointerEventsHandler'
import TooltipContext from '@theatre/studio/uiComponents/Popover/TooltipContext'

const GlobalStyle = createGlobalStyle`
  :host {
    contain: strict;
    all: initial;
    color: white;
    font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
      HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
  }

  * {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
  }
`

const Container = styled(PointerEventsHandler)`
  z-index: 50;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;

  &.invisible {
    pointer-events: none !important;
    opacity: 0;
    transform: translateX(1000000px);
  }
`

const PortalLayer = styled.div`
  z-index: 51;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  pointer-events: none;
`

export default function UIRoot() {
  const studio = getStudio()
  const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
    undefined as $IntentionalAny,
  )
  const [containerRef, container] = useRefAndState<HTMLDivElement>(
    undefined as $IntentionalAny,
  )

  useKeyboardShortcuts()
  const visiblityState = useVal(studio.atomP.ahistoric.visibilityState)
  useEffect(() => {
    if (visiblityState === 'everythingIsHidden') {
      console.warn(
        `Theatre Studio is hidden. Use the keyboard shortcut 'alt + \\' to restore the studio, or call studio.ui.restore().`,
      )
    }
    return () => {}
  }, [visiblityState])

  const inside = usePrism(() => {
    const visiblityState = val(studio.atomP.ahistoric.visibilityState)

    const initialised = val(studio.atomP.ephemeral.initialised)

    return !initialised ? null : (
      <StyleSheetManager
        disableVendorPrefixes
        target={getStudio()!.ui.containerShadow}
      >
        <>
          <GlobalStyle />
          <ProvideTheme>
            <PortalContext.Provider value={portalLayer}>
              <TooltipContext>
                <Container
                  className={
                    visiblityState === 'everythingIsHidden' ? 'invisible' : ''
                  }
                >
                  <PortalLayer ref={portalLayerRef} />
                  {<GlobalToolbar />}
                  {<PanelsRoot />}
                </Container>
              </TooltipContext>
            </PortalContext.Provider>
          </ProvideTheme>
        </>
      </StyleSheetManager>
    )
  }, [studio, portalLayerRef, portalLayer])

  return inside
}
