import clsx from 'clsx';

import Button, { ButtonShape, ButtonSize } from '@/components/button/Button';
import CloseButton from '@/components/button/CloseButton';
import { ArrowLeftIcon } from '@/icons';
import { Clip } from '@/state/clipStore';

import ChatCreateForm from './ChatCreateForm';
import { useChatMessagesStore } from './stores';
import { useChatContext } from './useChat';
import { useLoadClipDataIntoState } from './useLoadClipDataIntoState';

type ChatArtifactProps = {
  onAfterCreate?: (clips: Clip[]) => void;
};

export const ChatArtifact = ({ onAfterCreate }: ChatArtifactProps) => {
  const { currentAssistantPrompt } = useChatMessagesStore();
  const {
    setIsSidebarDismissed,
    isSidebarDismissed,
    lastPlayedClipId,
    setLastPlayedClipId,
  } = useChatContext();

  useLoadClipDataIntoState();

  return (
    <div
      className={clsx('-mt-16', {
        'p-2 pl-0': !isSidebarDismissed,
        'p-0': isSidebarDismissed,
        'h-[calc(100vh-110px)]': true,
      })}
    >
      <div
        className={clsx(
          'flex h-full flex-col overflow-y-auto rounded-xl border-white/15 bg-background-primary text-sm transition-all duration-400 ease-in-out',
          {
            'max-w-[376px] min-w-[376px] border-[0.5px]': !isSidebarDismissed,
            'max-w-0 min-w-0 border-0': isSidebarDismissed,
          }
        )}
      >
        <div className='relative h-0'>
          {!isSidebarDismissed ? (
            <>
              <CloseButton
                size={ButtonSize.Mini}
                className='absolute top-2 right-2 z-[500]'
                onClick={() => setIsSidebarDismissed(true)}
              />
              {lastPlayedClipId ? (
                <Button
                  icon={ArrowLeftIcon}
                  size={ButtonSize.Mini}
                  shape={ButtonShape.Pill}
                  className='absolute top-2 left-2 z-[500]'
                  onClick={() => setLastPlayedClipId(null)}
                />
              ) : null}
            </>
          ) : null}
        </div>
        {!isSidebarDismissed ? (
          <div className='z-10 h-full w-full'>
            <ChatCreateForm
              lastPlayedClipId={lastPlayedClipId ?? undefined}
              onAfterCreate={onAfterCreate}
              title={currentAssistantPrompt?.title ?? ''}
            />
          </div>
        ) : null}
      </div>
    </div>
  );
};