import {
  ChevronDownIcon,
  ChevronUpIcon,
  TerminalIcon,
  XIcon,
} from "lucide-react"

import { AnsiText } from "./ansi-text"
import { useDevtoolLocalization } from "./devtool-localization"

export interface DevtoolActionOutputProps {
  error?: boolean
  expanded: boolean
  onClose: () => void
  onExpandedChange: (expanded: boolean) => void
  output: string
}

export function DevtoolActionOutput({
  error = false,
  expanded,
  onClose,
  onExpandedChange,
  output,
}: DevtoolActionOutputProps) {
  const ToggleIcon = expanded ? ChevronUpIcon : ChevronDownIcon
  const { messages } = useDevtoolLocalization()

  return (
    <section className="i18n-devtool__output" data-error={error || undefined}>
      <header className="i18n-devtool__output-header">
        <span>
          <TerminalIcon aria-hidden="true" />
          {messages.commandOutput.title}
        </span>
        <div>
          <button
            type="button"
            aria-expanded={expanded}
            aria-label={
              expanded
                ? messages.commandOutput.collapse
                : messages.commandOutput.expand
            }
            onClick={() => onExpandedChange(!expanded)}
          >
            <ToggleIcon aria-hidden="true" />
          </button>
          <button
            type="button"
            aria-label={messages.commandOutput.close}
            onClick={onClose}
          >
            <XIcon aria-hidden="true" />
          </button>
        </div>
      </header>
      {expanded && (
        <pre>
          <AnsiText>{output}</AnsiText>
        </pre>
      )}
    </section>
  )
}