import { useEffect, useLayoutEffect, useRef, useState } from 'react';

// import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
// import { CoversIcon } from '@/icons';
import CreateTextarea from '../../../create/createV2/componentsQ3/CreateTextarea';

type Props = {
  message: string;
  onChangeSelection: (
    lyricsSelection: {
      message: string;
      selectionOverlayRange: { start: number; end: number };
      toolCallId: string | null;
    } | null
  ) => void;
  referencedLyrics?: {
    message: string;
    selectionOverlayRange: { start: number; end: number };
    toolCallId: string | null;
  } | null;
  toolCallId: string;
};

export const LyricsMessage = ({
  message,
  onChangeSelection,
  referencedLyrics,
  toolCallId,
}: Props) => {
  const lyricsBoxRef = useRef<HTMLTextAreaElement>(null);
  const isScrolledRef = useRef(false);

  const [selectionOverlayRange, setSelectionOverlayRange] = useState<{
    start: number;
    end: number;
  } | null>(null);
  useEffect(() => {
    if (selectionOverlayRange) {
      onChangeSelection({
        message,
        selectionOverlayRange,
        toolCallId: toolCallId,
      });
    } else {
      onChangeSelection(null);
    }
  }, [selectionOverlayRange]);
  useEffect(() => {
    if (!referencedLyrics) {
      setSelectionOverlayRange(null);
    }
  }, [referencedLyrics]);
  // Scroll to the bottom of the lyrics box when the message changes, unless it has been scrolled
  useLayoutEffect(() => {
    if (lyricsBoxRef.current && !isScrolledRef.current) {
      lyricsBoxRef.current.scrollTop = lyricsBoxRef.current.scrollHeight;
    }
  }, [lyricsBoxRef.current?.scrollHeight, isScrolledRef.current]);
  return (
    <div className='flex w-full flex-col py-4'>
      <div className='h-[300px] max-h-[300px] w-full max-w-[500px] flex-1 overflow-hidden rounded-2xl bg-background-fog-thin backdrop-blur-xs'>
        <CreateTextarea
          onTouchStart={() => {
            isScrolledRef.current = true;
          }}
          onWheel={() => {
            isScrolledRef.current = true;
          }}
          ref={lyricsBoxRef}
          value={message}
          readOnly
          setSelectionOverlayRange={setSelectionOverlayRange}
          selectionOverlayRange={selectionOverlayRange}
          className='relative mb-0 h-full max-h-[300px] w-full resize-none pb-0'
          textareaClassName='h-[300px] text-base md:text-base font-medium p-8'
        />
      </div>
      {/* <Button
        variant={ButtonVariant.Standard}
        size={ButtonSize.Mini}
        onClick={() => {
          // TODO regenerate lyrics
        }}
        icon={CoversIcon}
      /> */}
    </div>
  );
};