'use client';

import { ImageEditor, ImageEditorHandle } from '@/components/image-editor';
import { NovaChat } from '@/components/nova-sdk';
import { useBuildConversationConnect } from '@/components/nova-sdk/hooks';
import { useImages } from '@/components/nova-sdk/store/useImages';
import { useRef } from 'react';

const ChatWithImageEditor = () => {
  const imageEditorRef = useRef<ImageEditorHandle>(null);
  const { conversationId, platformConfig } = useBuildConversationConnect();
  useImages(imageEditorRef)

  return (
    <div className="w-full h-screen flex">
      <div className="w-1/2 flex-shrink-0">
        {conversationId && (
          <ImageEditor taskId={conversationId} ref={imageEditorRef} />
        )}
      </div>
      <div className="w-1/2">
        <NovaChat
          platformConfig={platformConfig}
          conversationId={conversationId}
          agentId={platformConfig.agentId}
          panelMode={'dialog'}
        />
      </div>
    </div>
  );
};

export default ChatWithImageEditor;