import { LanguagesIcon } from "@workspace/ui/components/icon"

import { useDevtoolLocalization } from "./devtool-localization"
import { useFloatingTrigger } from "./use-floating-trigger"

export interface I18nDevtoolTriggerProps {
  controls?: string
  open?: boolean
  onOpen: () => void
  storageKey?: string
}

export function I18nDevtoolTrigger({
  controls = "i18n-devtool-panel",
  open = false,
  onOpen,
  storageKey,
}: I18nDevtoolTriggerProps) {
  const floatingTrigger = useFloatingTrigger({ storageKey })
  const { messages } = useDevtoolLocalization()

  return (
    <button
      type="button"
      aria-controls={controls}
      aria-expanded={open}
      aria-label={messages.trigger.open}
      className="i18n-devtool__trigger"
      data-collapsed={floatingTrigger.isCollapsed || undefined}
      data-dock={floatingTrigger.dockEdge}
      data-dragging={floatingTrigger.isDragging || undefined}
      hidden={open}
      ref={floatingTrigger.triggerRef}
      style={floatingTrigger.style}
      onBlur={floatingTrigger.handleBlur}
      onClick={(event) => {
        if (floatingTrigger.handleClick()) {
          event.preventDefault()
          return
        }

        onOpen()
      }}
      onFocus={floatingTrigger.handleFocus}
      onPointerCancel={floatingTrigger.handlePointerCancel}
      onPointerDown={floatingTrigger.handlePointerDown}
      onPointerEnter={floatingTrigger.handlePointerEnter}
      onPointerLeave={floatingTrigger.handlePointerLeave}
      onPointerMove={floatingTrigger.handlePointerMove}
      onPointerUp={floatingTrigger.handlePointerUp}
    >
      <span className="i18n-devtool__trigger-icon" aria-hidden="true">
        <LanguagesIcon />
      </span>
      <span className="i18n-devtool__trigger-label">i18n</span>
    </button>
  )
}