import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

import { ButtonVariant } from '../button/Button';
import LyricsModelSelector from '../select/LyricsModelSelector';
import TextareaV2, { TextareaV2Props } from './TextareaV2';

const OneboxTextarea = ({
  lyricsModel,
  setLyricsModel,
  enableModelSelector,
  ...restProps
}: {
  lyricsModel: string;
  setLyricsModel: (newLyricsModel: string) => void;
  enableModelSelector?: boolean;
} & TextareaV2Props) => {
  return (
    <div className='relative'>
      <TextareaV2
        {...restProps}
        maxLength={restProps.maxLength || 200}
        textAreaClassName={twMerge(
          clsx({ ['pb-14']: enableModelSelector }),
          restProps.textAreaClassName
        )}
      />
      {enableModelSelector && (
        <div className='absolute bottom-0 p-2'>
          <LyricsModelSelector
            value={lyricsModel}
            onSetValue={setLyricsModel}
            variant={ButtonVariant.Secondary}
            menuClassName='bg-background-secondary'
          />
        </div>
      )}
    </div>
  );
};

export default OneboxTextarea;