import React from 'react';
import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
import WindowToggle from './components/WindowToggle';
import WarningRecordList from './components/WarningRecordList';

interface RealTimeMonitorProps {
  videoDataSource?: VideoPlayerCardProps[];
  handleWindowClick?: (key?: string) => void;
  handleCloseButtonClick?: (key?: string) => void;
  selectedWindowKey?: string;
  warningDataSource?: IRecord[];
  viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
  /*
  处理 图片下载按钮点击事件
  */
  handleDownloadImg?: (imgSrc?: string) => void;
  /*
  处理 预警记录卡片点击事件
  */
  onRecordClick?: (record?: IRecord) => void;
  /*
  获取选中的 记录 id 用于 判断是否显示 选中样式
  */
  selectedRecordId?: string;
  isRecordListLoading?: boolean;
  recordListTitle?: string;
  style?: React.CSSProperties;
  cardStyle?: React.CSSProperties;
  imgStyle?: React.CSSProperties;
  largeImageTitle?: string;
}

export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {

  const { videoDataSource,
    handleWindowClick,
    handleCloseButtonClick,
    selectedWindowKey,
    warningDataSource,
    viewLargerImageModalRef,
    handleDownloadImg,
    onRecordClick,
    selectedRecordId,
    isRecordListLoading,
  } = props

  return (
    <div className='zhst-biz-real-time-monitor' style={{ display: 'flex' }} >
      <WindowToggle
        selectedWindowKey={selectedWindowKey}
        dataSource={videoDataSource}
        handleWindowClick={handleWindowClick}
        handleCloseButtonClick={handleCloseButtonClick}
      />
      <WarningRecordList
        dataSource={warningDataSource}
        handleDownloadImg={handleDownloadImg}
        onRecordClick={onRecordClick}
        selectedRecordId={selectedRecordId}
        viewLargerImageModalRef={viewLargerImageModalRef}
        isRecordListLoading={isRecordListLoading}
        recordListTitle="监控预警记录"
      />
    </div>

  );
};

export default RealTimeMonitor;