MemoryBear/web/src/views/KnowledgeBase/components/ShareModal.tsx

/*
 * @Description: 
 * @Version: 0.0.1
 * @Author: yujiangping
 * @Date: 2025-11-10 18:52:55
 * @LastEditors: ZhaoYing
 * @LastEditTime: 2026-03-25 18:30:28
 */
import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
import { Switch, App } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ShareModalRef, ShareModalRefProps, KnowledgeBase, SpaceItem} from '@/views/KnowledgeBase/types';
import RbModal from '@/components/RbModal'
// import betchControlIcon from '@/assets/images/knowledgeBase/betch-control.png';
import kbIcon from '@/assets/images/knowledgeBase/knowledge-management.png';
// import robotIcon from '@/assets/images/knowledgeBase/robot.png';
import { updateKnowledgeBase, getWorkspaceAuthorizationList } from '@/api/knowledgeBase';
import { NoData } from './noData';
import type { ListQuery, ShareSpaceModalRef } from '@/views/KnowledgeBase/types';
import { formatDateTime } from '@/utils/format';
import ShareSpaceModal from './ShareSpaceModal'
const ShareModal = forwardRef<ShareModalRef,ShareModalRefProps>(({ handleShare: onShare }, ref) => {
  const { t } = useTranslation();
  const shareSpaceModalRef = useRef<ShareSpaceModalRef>(null);
  const { message: messageApi } = App.useApp()
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false)
  const [curIndex, setCurIndex] = useState(9999);
  const [query, setQuery] = useState<ListQuery>({});

  const [kbId, setKbId] = useState<string>('');
  const [knowledgeBase, setKnowledgeBase] = useState<KnowledgeBase | null>(null);
  const [spaceList, setSpaceList] = useState<SpaceItem[]>([]);
 
  // Close modal and reset state
  const handleClose = () => {
    setCurIndex(9999);
    setLoading(false)
    setVisible(false);
  };

  const handleOpen = (kb_id?: string,knowledgeBase?: KnowledgeBase | null) => {
    setKbId(kb_id ?? '');
    setKnowledgeBase(knowledgeBase ?? null);
    setVisible(true);
    getShareSpaceList(kb_id || '')
    // getSpaceListFn()
  };
  const getShareSpaceList = async(id: string) => {
      try{
        const response = await getWorkspaceAuthorizationList(id)
        setSpaceList(response?.items as any[]);
      } catch (error) {
        messageApi.error(t('knowledgeBase.shareFailed'));
      }
      
  }

  const handleShare = async() => {
    setLoading(true);
    try {
      const workspaceIds = spaceList
        .map(item => item.target_kb?.workspace_id)
        .filter(Boolean)
        .join(',');
      
      console.log('Workspace IDs:', workspaceIds);
      shareSpaceModalRef?.current?.handleOpen(kbId,knowledgeBase,workspaceIds);
      
      // Close modal after sharing
      handleClose();
    } finally {
      setLoading(false);
    }
  }
  const handleChange = (checked: boolean, item: any) => {
    // Toggle shared knowledge base status
    console.log('Switch changed:', checked, item);
    updateKnowledgeBase(item.target_kb?.id, {
      status: checked ? 1 : 2
    }).then(() => {
      if(checked){
        messageApi.success(t('knowledgeBase.shareSuccess'));
      }else{
        messageApi.success(t('knowledgeBase.stopShareSuccess'));
      }
      
      getShareSpaceList(kbId);
    }).catch(() => {
      messageApi.error(t('knowledgeBase.shareFailed'));
    })
  }

  // Expose methods to parent component
  useImperativeHandle(ref, () => ({
    handleOpen,
    handleClose,
    handleShare
  }));

  return (
    <>
    <RbModal
      title={t('knowledgeBase.shareSpace')}
      open={visible}
      onCancel={handleClose}
      okText={t('knowledgeBase.share')}
      onOk={handleShare}
      confirmLoading={loading}
    >
        <div className='rb:flex rb:flex-col rb:text-left'>
            <h4 className='rb:text-sm rb:font-medium rb:text-gray-800'>{t('knowledgeBase.shareSpaceTitle')}</h4>
            <span className='rb:text-xs rb:text-gray-500'>{t('knowledgeBase.shareSpaceNote')}</span>
            <div className='rb:flex rb:flex-col rb:text-left rb:gap-4 rb:mt-4 '>
              {spaceList.length === 0 && (
                <NoData />
              )}
              {spaceList.map((item,index) => (
                  <div key={index} 
                      className={`rb:flex rb:items-center rb:justify-between rb:border-gray-200 rb:gap-2 rb:rounded-lg rb:p-4 rb:border`}
                     
                  >
                    <div className='rb:flex rb:items-center rb:gap-2'>
                        <img src={item.icon || kbIcon} className='rb:size-[20px]' />
                        <div className='rb:flex rb:flex-col rb:text-left rb:gap-1'>
                            <span className='rb:text-base rb:font-medium rb:text-gray-800'>{item.target_workspace?.name}</span>
                            <span className='rb:text-xs rb:text-gray-500'>{t('knowledgeBase.authorizedPerson')}:{item.shared_user?.username} {formatDateTime((item.target_workspace?.created_at || 0))}</span>
                        </div>
                    </div>
                    <div>
                      <Switch checkedChildren={t('common.enable')} unCheckedChildren={t('common.disable')} defaultChecked={item.target_kb?.status === 1} onChange={(checked) => handleChange(checked, item)} />
                    </div>
                  </div>
              ))}
            </div>
        </div>
    </RbModal>
    <ShareSpaceModal 
      ref={shareSpaceModalRef} 
    />
    </>
  );
});

export default ShareModal;