import { createSignal, For, Show } from "solid-js"
import { SplitBorder } from "@tui/component/border"
import { useTheme } from "@tui/context/theme"
import { useKeybind } from "@tui/context/keybind"
import { useDialog } from "../../ui/dialog"
import { useCommandDialog } from "@tui/component/dialog-command"
import { DialogConfirm } from "@tui/ui/dialog-confirm"

interface RevertBannerProps {
  revert: { messageID: string; reverted: unknown[]; diff: string | undefined; diffFiles: { filename: string; additions: number; deletions: number }[] }
}

export function RevertBanner(props: RevertBannerProps) {
  const { theme } = useTheme()
  const keybind = useKeybind()
  const command = useCommandDialog()
  const dialog = useDialog()
  const [hover, setHover] = createSignal(false)
  const handleUnrevert = async () => {
    const confirmed = await DialogConfirm.show(dialog, "Confirm Redo", "Are you sure you want to restore the reverted messages?")
    if (confirmed) command.trigger("session.redo")
  }
  return (
    <box onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)} onMouseUp={handleUnrevert} marginTop={1} flexShrink={0} border={["left"]} customBorderChars={SplitBorder.customBorderChars} borderColor={theme.backgroundPanel}>
      <box paddingTop={1} paddingBottom={1} paddingLeft={2} backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}>
        <text fg={theme.textMuted}>{props.revert.reverted.length} message reverted</text>
        <text fg={theme.textMuted}>
          <span style={{ fg: theme.text }}>{keybind.print("messages_redo")}</span> or /redo to restore
        </text>
        <Show when={props.revert.diffFiles?.length}>
          <box marginTop={1}>
            <For each={props.revert.diffFiles}>
              {(file) => (
                <text fg={theme.text}>
                  {file.filename}
                  <Show when={file.additions > 0}><span style={{ fg: theme.diffAdded }}> +{file.additions}</span></Show>
                  <Show when={file.deletions > 0}><span style={{ fg: theme.diffRemoved }}> -{file.deletions}</span></Show>
                </text>
              )}
            </For>
          </box>
        </Show>
      </box>
    </box>
  )
}
