import { useAuth, useClerk } from '@clerk/nextjs';
import clsx from 'clsx';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import storageAvailable from 'storage-available';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  AURA_V2_STYLE,
  ButtonShape,
  ButtonSize,
  ButtonVariant,
  DEFAULT_BUTTON_AURA_IMAGE,
} from '@/components/button/Button';
import TextareaV2, { CharCountMode } from '@/components/textarea/TextareaV2';
import { CreateIcon, SearchIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { MAX_CUSTOM_PROMPT_CHARS } from '@/utils/constants';
import { getClerkSignInRedirectProps } from '@/utils/utils';

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  defaultValue?: string;
  onSubmit?: (value: string) => void;
};

const TopRightBar: React.FC<Props> = observer((props) => {
  const { className, defaultValue, onSubmit, ...restProps } = props;

  const { t } = useTranslation();
  const router = useRouter();
  const clerk = useClerk();
  const { isSignedIn } = useAuth();
  const { genForm } = useStores();

  const [value, setValue] = useState('');

  const handleSubmit = useCallback(
    (prompt: string) => {
      if (onSubmit) {
        onSubmit(prompt);
      } else {
        if (storageAvailable('localStorage') && prompt && prompt.length > 0) {
          runInAction(() => {
            genForm.hasRunSavedPrompt = false;
          });

          localStorage.setItem('prompt', prompt || '');
          localStorage.setItem('prompt_source', 'quickbox');
          localStorage.setItem('prompt_saved_at', Date.now().toString());

          logWebUserEvent({
            actionName: 'ClickedCreateOnHomepage',
            context: {
              prompt: prompt || '',
            },
          });

          if (isSignedIn) {
            router.push('/create/');
          } else {
            clerk.openSignIn({
              withSignUp: true,
              ...getClerkSignInRedirectProps('/create/'),
            });
          }
        }
      }
    },
    [router, clerk, isSignedIn, onSubmit, genForm]
  );

  const handleTextareaChange = useCallback<
    React.ChangeEventHandler<HTMLTextAreaElement>
  >((e) => {
    setValue(e.currentTarget.value);
  }, []);
  const handleTextareaKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
      if (!e.isDefaultPrevented()) {
        if (e.key === 'Enter') {
          if (!e.shiftKey) {
            // send when enter is pressed w/o shift - enables line break with shift+enter
            e.preventDefault();
            handleSubmit(value);
          } else {
            // prevent keyboard line break
            e.preventDefault();
          }
        }
      }
    },
    [value, handleSubmit]
  );
  const handleButtonClick = useCallback(() => {
    handleSubmit(value);
  }, [value, handleSubmit]);

  return (
    <div
      className={twMerge(
        'flex flex-row items-center justify-center gap-2',
        'z-50',
        className
      )}
      {...restProps}
    >
      <div
        className={clsx(
          'flex w-[400px] max-w-full flex-row items-center justify-center gap-1 py-1 pr-1 pl-4',
          'rounded-full bg-background-secondary text-foreground-primary placeholder:text-foreground-inactive'
        )}
      >
        <TextareaV2
          value={value}
          defaultValue={defaultValue}
          placeholder='Create your own song'
          className='rounded-none border-0 bg-transparent p-0'
          textAreaClassName={clsx(
            '-my-1 px-0 py-1 border-0',
            'h-10 leading-10',
            'whitespace-nowrap text-foreground-primary overflow-x-hidden overflow-x-auto'
          )}
          onChange={handleTextareaChange}
          onKeyDown={handleTextareaKeyDown}
          rows={1}
          maxRows={1}
          maxLength={MAX_CUSTOM_PROMPT_CHARS}
          charCountMode={CharCountMode.Never}
        />
        <Button
          iconEnd={CreateIcon}
          variant={ButtonVariant.Aura}
          size={ButtonSize.Small}
          shape={ButtonShape.Pill}
          onClick={handleButtonClick}
          disabled={!value}
          backgroundImage={DEFAULT_BUTTON_AURA_IMAGE}
          style={AURA_V2_STYLE}
        >
          {t('songActions.create')}
        </Button>
      </div>
      <div>
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          icon={SearchIcon}
          aria-label={t('nav.search')}
          href='/search'
          className='bg-background-secondary p-3 text-foreground-tertiary hover:text-foreground-primary'
          iconClassName='w-5 h-5 m-0.5'
        />
      </div>
    </div>
  );
});

export default TopRightBar;