import { TextareaRenderable, TextAttributes } from "@opentui/core"
import { Show, createEffect, onMount } from "solid-js"
import { useKeyboard } from "@opentui/solid"
import { useTheme } from "@tui/context/theme"
import { useDialog, type DialogContext } from "@tui/ui/dialog"
import { t } from "@/util/i18n"

type Props = {
  current: string
  pointing?: string
  onConfirm: (value: string) => void
}

export function DialogPointing(props: Props) {
  const { theme } = useTheme()
  const dialog = useDialog()
  let textarea: TextareaRenderable

  useKeyboard((evt) => {
    if (evt.name === "return") {
      evt.preventDefault()
      evt.stopPropagation()
      props.onConfirm(textarea.plainText)
    }
  })

  onMount(() => {
    dialog.setSize("medium")
    setTimeout(() => {
      if (!textarea || textarea.isDestroyed) return
      textarea.focus()
    }, 1)
    textarea.gotoLineEnd()
  })

  createEffect(() => {
    if (!textarea || textarea.isDestroyed) return
    textarea.focus()
  })

  const pinned = !!props.pointing

  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
        <text attributes={TextAttributes.BOLD} fg={theme.text}>
          {t("cmd.session.pointing.title")}
        </text>
        <text fg={theme.textMuted}>esc</text>
      </box>

      <box paddingBottom={1} gap={1}>
        <text fg={theme.textMuted}>{t("cmd.session.pointing.subtitle")}</text>

        <box flexDirection="row" gap={1} paddingLeft={1}>
          <text fg={theme.textMuted}>•</text>
          <text fg={theme.textMuted}>{t("cmd.session.pointing.hint.current")}</text>
          <text fg={theme.secondary}>{props.current}</text>
        </box>

        <Show when={pinned}>
          <box flexDirection="row" gap={1} paddingLeft={1}>
            <text fg={theme.primary}>•</text>
            <text fg={theme.textMuted}>{t("cmd.session.pointing.hint.pinned")}</text>
            <text fg={theme.primary}>{props.pointing}</text>
          </box>
        </Show>

        <text fg={theme.textMuted} paddingLeft={1}>
          {t("cmd.session.pointing.hint.blank")}
        </text>

        <textarea
          onSubmit={() => props.onConfirm(textarea.plainText)}
          height={3}
          keyBindings={[{ name: "return", action: "submit" }]}
          ref={(val: TextareaRenderable) => { textarea = val }}
          initialValue={pinned ? props.pointing : props.current}
          placeholder={t("cmd.session.pointing.placeholder")}
          placeholderColor={theme.textMuted}
          textColor={theme.text}
          focusedTextColor={theme.text}
          cursorColor={theme.text}
        />
      </box>

      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
        <text fg={theme.text}>
          enter <span style={{ fg: theme.textMuted }}>confirm</span>
        </text>
      </box>
    </box>
  )
}

export function show(dialog: DialogContext, opts: Props): Promise<string | null> {
  return new Promise((resolve) => {
    dialog.replace(
      () => <DialogPointing {...opts} onConfirm={(v) => resolve(v)} />,
      () => resolve(null),
    )
  })
}
