import { ChevronDown, ChevronUp } from "lucide-react"
import * as React from "react"

import { Button } from "../ui/button"

const collapseThreshold = 360
export function CollapsibleUserMessage({ content }: { content: string }) {
  const [expanded, setExpanded] = React.useState(false)
  const contentId = React.useId()
  const collapsible = content.length > collapseThreshold
  const Icon = expanded ? ChevronUp : ChevronDown

  return (
    <div className="flex min-w-0 flex-col gap-2">
      <div
        id={contentId}
        className={`max-w-none min-w-0 text-[15px] leading-7 whitespace-pre-wrap wrap-break-word ${collapsible && !expanded ? "agents24-user-message-collapsed" : ""}`}
      >
        {content}
      </div>
      {collapsible && (
        <Button
          variant="ghost"
          size="sm"
          type="button"
          aria-controls={contentId}
          aria-expanded={expanded}
          className="h-auto w-fit px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
          onClick={() => setExpanded((value) => !value)}
        >
          {expanded ? "Show less" : "Show more"}
          <Icon />
        </Button>
      )}
    </div>
  )
}