import StackViewer from './viewers/stack.image.viewer';
import { useSelector } from 'react-redux';
import { RootState } from '@/states/store';
import {
  getViewIconUrl,
  getExposedImageUrl,
  getDcmImageUrl,
} from '@/API/bodyPosition';
import { Image } from 'antd';

const ImageControl = () => {
  const selectedBodyPosition = useSelector(
    (state: RootState) => state.bodyPositionList.selectedBodyPosition
  );

  const isExposed =
    selectedBodyPosition &&
    selectedBodyPosition.dview &&
    selectedBodyPosition.dview.expose_status === 'Exposed';
  console.log('isExposed:', isExposed);
  const imageUrl = selectedBodyPosition
    ? isExposed
      ? getExposedImageUrl(selectedBodyPosition.sop_instance_uid)
      : getViewIconUrl(selectedBodyPosition.body_position_image)
    : '';
  const dcmUrls: string[] = [];
  if (isExposed) {
    dcmUrls.push(getDcmImageUrl(selectedBodyPosition.sop_instance_uid));
    console.log(`[ImageControl] dcmUrls:`, dcmUrls);
  }
  return (
    <div className="h-full w-full">
      {isExposed ? (
        <StackViewer imageIndex={0} imageUrls={dcmUrls} />
      ) : (
        <Image
          src={imageUrl}
          alt="Body Position"
          style={{ width: '100%', height: '100%' }}
        />
      )}
      {/* 第10张图和第30张图明显不同，可以用于测试，看效果*/}
    </div>
  );
};

export default ImageControl;