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

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;

      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={mjChatCls(
        ['msg-edit-textarea-wrapper'],
        'w-full max-h-[70vh] overflow-auto rounded-xl border-2 border-white/30',
      )}
      style={{
        height: wrapHeight,
      }}
    >
      <textarea
        ref={textareaRef}
        className={mjChatCls(
          [
            'msg-edit-textarea',
            isUser ? 'msg-edit-textarea-user' : 'msg-edit-textarea-assistant',
          ],
          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>
  );
};
