import { cn } from '@heroui/react';
import { useEffect, useRef, useState } from 'react';

export type MessageEditAreaProps = {
  isUser: boolean;
  editedMessage: string;
  onEditChange: (content: string) => void;
  onEditAreaShow: () => void;
};

export const MessageEditArea = ({
  isUser,
  editedMessage,
  onEditChange,
  onEditAreaShow,
}: MessageEditAreaProps) => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const [wrapHeight, setWrapHeight] = useState(0);

  // biome-ignore lint/correctness/useExhaustiveDependencies: useMount
  useEffect(() => {
    const t = textareaRef.current;
    if (t) {
      const parent = t.parentElement;
      console.log(parent);

      t.style.height = 'auto';
      t.style.height = t.scrollHeight + 'px';
      if (parent) {
        parent.style.height = t?.scrollHeight + 'px';
      }

      t.focus();
      // 光标移到最后
      const length = t.value.length;
      t.setSelectionRange(length, length);
      onEditAreaShow();
    }
  }, []);

  return (
    <div
      className="w-full"
      style={{
        height: wrapHeight,
      }}
    >
      <textarea
        ref={textareaRef}
        className={cn(
          'w-full outline-none resize-none h-fit overflow-hidden p-4 bg-background rounded-xl text-[16px]',
          isUser ? 'rounded-br-sm' : 'rounded-bl-sm',
        )}
        value={editedMessage}
        onChange={(e) => {
          onEditChange(e.target.value);
          e.target.style.height = '5px';
          e.target.style.height = `${e.target.scrollHeight}px`;
          setWrapHeight(e.target.scrollHeight);
        }}
      />
    </div>
  );
};