/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { motion } from 'framer-motion';
import React, { useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { CaretRightIcon, MicrophoneIcon, UploadIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

type Props = {
  title: string;
  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
  placeholder: string;
  isCollapsed?: boolean;
  onCollapse?: () => void;
  isCollapsibleInput?: boolean;

  inline?: boolean;
  disabled?: boolean;
  onUpsample?: () => void;
  onResetUpsampledPrompt?: () => void;
  isUpsampleLoading?: boolean;
  isUpsampled?: boolean;
  handleCreateRedirect: () => void;
};

export const AudioInput = ({
  title,
  icon,
  onCollapse,
  isCollapsibleInput = true,
  disabled,
  inline = false,
  handleCreateRedirect,
}: Props) => {
  const IconComponent = icon;

  const [isCollapsed, setIsCollapsed] = useState(true);

  return (
    <div
      className={clsx(
        'relative w-full overflow-hidden rounded-[16px] bg-[rgba(255,255,255,0.10)]',
        {
          'backdrop-blur-[25px]': isCollapsed && !inline,
          'group backdrop-blur-[25px]': !isCollapsed && !inline,
          'border-r-0 border-b-0 border-l-0': inline,
          'brightness-50': disabled,
        }
      )}
    >
      <div
        className={clsx(
          'flex h-[60px] flex-row items-center px-4 transition-all duration-500 ease-in-out',
          {
            'cursor-pointer hover:bg-background-fog-thin': isCollapsibleInput,
          }
        )}
        onClick={() => {
          setIsCollapsed(!isCollapsed);
          logWebUserEvent({
            actionName: 'HomePageAdvancedCreateAudioCollapseClicked',
            context: {
              isCollapsed: !isCollapsed,
            },
          });
          onCollapse?.();
        }}
      >
        <div className='flex flex-1 flex-row items-center gap-[5px] text-base font-medium select-none'>
          <>{!!IconComponent ? <IconComponent className='h-4 w-4' /> : null}</>
          {title}
        </div>
        <div className='flex flex-row gap-2'>
          {isCollapsibleInput && !!onCollapse ? (
            <Button
              variant={ButtonVariant.Fog}
              shape={ButtonShape.Pill}
              size={ButtonSize.Small}
              onClick={(e) => {
                onCollapse?.();
                setIsCollapsed(!isCollapsed);
                logWebUserEvent({
                  actionName: 'HomePageAdvancedCreateAudioCollapseClicked',
                  context: {
                    isCollapsed: !isCollapsed,
                  },
                });
                e.stopPropagation();
              }}
              iconClassName={clsx(
                'transition-transform duration-500 ease-in-out',
                {
                  'rotate-90': !isCollapsed,
                }
              )}
              icon={CaretRightIcon}
            />
          ) : null}
        </div>
      </div>

      <motion.div
        initial={false}
        animate={{
          height: isCollapsed ? 0 : 'auto',
          opacity: isCollapsed ? 0 : 1,
        }}
        transition={{
          height: {
            duration: 0.3,
            ease: 'easeInOut',
          },
          opacity: {
            duration: 0.5,
            ease: 'easeInOut',
          },
        }}
        className={clsx('flex flex-col overflow-hidden rounded-b-2xl')}
      >
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: isCollapsed ? 0 : 1 }}
          transition={{
            duration: 0.4,
            opacity: {
              duration: 0.3,
            },
          }}
          className={clsx('relative flex flex-col overflow-hidden', {
            'p-2 px-2 pt-2': true,
          })}
        >
          <div
            className={clsx(
              'relative flex flex-1 flex-row flex-wrap items-center gap-2'
            )}
          >
            <div
              className={`w-full overflow-x-hidden rounded-2xl bg-transparent transition-all duration-500 ease-in-out ${
                isCollapsed ? 'opacity-0' : 'opacity-100'
              }`}
            >
              <div className='flex w-full gap-2'>
                <Button
                  variant={ButtonVariant.Secondary}
                  shape={ButtonShape.Pill}
                  size={ButtonSize.Large}
                  className='w-full'
                  onClick={() => {
                    handleCreateRedirect();
                    logWebUserEvent({
                      actionName: 'HomePageAdvancedCreateAudioUploadClicked',
                    });
                  }}
                  icon={<UploadIcon className='h-4 w-4' />}
                >
                  Upload
                </Button>
                <Button
                  variant={ButtonVariant.Secondary}
                  shape={ButtonShape.Pill}
                  size={ButtonSize.Large}
                  className='w-full'
                  icon={<MicrophoneIcon className='h-4 w-4' />}
                  onClick={() => {
                    handleCreateRedirect();
                    logWebUserEvent({
                      actionName: 'HomePageAdvancedCreateAudioRecordClicked',
                    });
                  }}
                >
                  Record
                </Button>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
};