import { DragModal, DragModalTitle, getComputedHeight } from '@/components/a/drag-modal/index.tsx';
import { useChatStore } from '../store';
import { useShallow } from 'zustand/shallow';
import { ChatHistoryList } from './List';

export const ChatHistoryDialog = ({ storeId }: { storeId: string }) => {
  const { showList, setShowList, setModelId, modelId } = useChatStore(
    useShallow((state) => ({ showList: state.showList, setShowList: state.setShowList, setModelId: state.setModelId, modelId: state.modelId  })),
  );
  const computedHeight = getComputedHeight();
  if (!showList) {
    return null;
  }
  return (
    <DragModal
      focus={modelId === 'chat-history'}
      title={
        <DragModalTitle
          title='Chat History'
          onClose={() => setShowList(false)}
          onClick={() => {
            setModelId('chat-history');
          }}
        />
      }
      content={
        <div className='w-full h-full p-2 overflow-y-auto scrollbar'>
          <ChatHistoryList storeId={storeId} />
        </div>
      }
      defaultSize={{
        width: 600,
        height: 400,
      }}
      style={{
        left: computedHeight.width / 2 - 300,
        top: computedHeight.height / 2 - 200,
      }}
    />
  );
};