'use client';

import clsx from 'clsx';
import { useEffect, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { CheckIcon, CloseIcon, EditIcon } from '@/icons';

import TextareaV2, { CharCountMode } from './TextareaV2';

interface LyricsEditableProps {
  className?: string;
  lyrics: string;
  setLyrics: (lyrics: string) => void;
  promptLimit: number;
  onBlur: (title: string) => void;
  disabled?: boolean;
}

export default function LyricsEditable({
  className,
  lyrics,
  setLyrics,
  promptLimit,
  onBlur,
  disabled,
}: LyricsEditableProps) {
  const ref = useRef<HTMLTextAreaElement>(null);
  const [oldLyrics, setOldLyrics] = useState(lyrics || '');
  const [editing, setEditing] = useState(false);

  useEffect(() => {
    if (editing) {
      const timeout = setTimeout(() => {
        if (ref.current) {
          ref.current.focus();
        }
      }, 10);
      return () => {
        clearTimeout(timeout);
      };
    }
  }, [editing]);

  return (
    <section
      className={twMerge('flex w-full flex-col gap-2 xl:pr-8', className)}
    >
      <div className='font-sans text-foreground-primary'>
        <>
          <TextareaV2
            ref={ref}
            autoFocus={editing}
            className={clsx(
              'h-full w-full resize-none rounded-lg whitespace-pre-wrap transition ease-linear outline-none',
              'border-2 bg-background-secondary font-sans text-inherit',
              {
                hidden: !editing,
                'border-transparent': lyrics.length < promptLimit,
                'border-current': lyrics.length >= promptLimit,
              }
            )}
            value={lyrics}
            maxLength={promptLimit}
            charCountMode={CharCountMode.Always}
            onChange={(e) => {
              setLyrics(e.target.value.slice(0, promptLimit));
            }}
            onKeyDownCapture={(e) => {
              if (e.key === 'Escape') {
                (e.currentTarget as HTMLElement).id = 'discard';
                e.currentTarget.blur();
              }
            }}
            onBlur={(e) => {
              setEditing(false);
              if (
                e.relatedTarget?.id === 'discard' ||
                lyrics.length === 0 ||
                e.target.id == 'discard' ||
                e.relatedTarget?.ariaLabel?.toLowerCase().includes('playbar')
              ) {
                if (e.target.id == 'discard') {
                  e.target.id = '';
                }
                return setLyrics(oldLyrics || '');
              }
              if (lyrics) onBlur(lyrics);
              setOldLyrics(lyrics);
            }}
            disabled={disabled}
          />
          <p className={clsx('whitespace-pre-wrap', { hidden: editing })}>
            {lyrics}
          </p>
        </>
      </div>
      <div className='flex w-full items-center gap-2 text-foreground-primary'>
        {editing ? (
          <>
            <Button
              disabled={oldLyrics === lyrics || lyrics.length === 0}
              variant={ButtonVariant.Standard}
              size={ButtonSize.Small}
              shape={ButtonShape.Rounded}
              iconStart={CheckIcon}
              onClick={() => {
                if (lyrics) onBlur(lyrics);
                setOldLyrics(lyrics);
                setEditing(false);
              }}
            >
              Save
            </Button>
            <Button
              id='discard'
              variant={ButtonVariant.Standard}
              size={ButtonSize.Small}
              shape={ButtonShape.Rounded}
              iconStart={CloseIcon}
            >
              Discard
            </Button>
          </>
        ) : !disabled ? (
          <Button
            variant={ButtonVariant.Standard}
            size={ButtonSize.Small}
            shape={ButtonShape.Rounded}
            iconStart={EditIcon}
            onClick={() => {
              setEditing(true);
            }}
          >
            Edit Displayed Lyrics
          </Button>
        ) : null}
      </div>
    </section>
  );
}