import clsx from 'clsx';
import { ReactNode, RefObject } from 'react';
import { twMerge } from 'tailwind-merge';

import { useChatStore } from '../../stores';

interface ChatInputBarContainerProps {
  ref?: RefObject<any>;
  children: ReactNode;
  className?: string;
  isNewUserState?: boolean;
  borderColor?: string;
  backgroundColor?: string;
}

export const ChatInputBarContainer: React.FC<ChatInputBarContainerProps> = ({
  ref,
  children,
  className,
  isNewUserState = false,
  borderColor: _borderColor,
  backgroundColor,
}) => {
  const references = useChatStore((state) => state.references);
  const hasReferences = references.length > 0;
  return (
    <div
      className={twMerge(
        'absolute bottom-0 left-1/2 z-[500] w-full max-w-[1024px] min-w-0 -translate-x-1/2 px-8 transition-all duration-500 ease-in-out',
        isNewUserState && !hasReferences && '-translate-y-[calc(50vh-140px)]',
        isNewUserState && hasReferences && '-translate-y-[calc(50vh-164px)]',
        className
      )}
      ref={ref}
    >
      <div className={clsx('h-full w-full overflow-hidden')}>
        <div
          className='flex w-full flex-col gap-2'
          style={{
            backgroundColor: backgroundColor,
          }}
        >
          {children}
        </div>
      </div>
    </div>
  );
};