import React from 'react';
import { Card, Grid, Button, Row, Flex } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { getViewIconUrl } from '@/API/bodyPosition';
import { Image } from 'antd';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import type { RootState } from '@/states/store';
import type { View } from '@/states/patient/viewSelection';

const { useBreakpoint } = Grid;

// 卡片尺寸配置
const getCardSize = (screens: ReturnType<typeof useBreakpoint>) => {
  if (screens.xl || screens.xxl) {
    return { width: 150, height: 100 };
  }
  if (screens.md || screens.lg) {
    return { width: 90, height: 60 };
  }
  return { width: 60, height: 45 };
};
interface SelectedProtocolListProps {
  style?: React.CSSProperties;
  className?: string;
}
const SelectedProtocolList: React.FC<SelectedProtocolListProps> = () => {
  const screens = useBreakpoint();
  const cardSize = getCardSize(screens);

  // 从redux获取selectedViews
  const selectedViews = useSelector(
    (state: RootState) => state.viewSelection.selectedViews
  );

  // 移除操作（实际项目可用props传递onRemove）
  const handleRemove = (id: string) => {
    // 这里仅做演示
    // 实际应通过props回调或状态管理移除
    alert(`移除体位ID: ${id}`);
  };

  return (
    <Row className="h-full overflow-auto">
      {selectedViews.map((item: View) => (
        <Card
          key={item.internal_id}
          hoverable
          style={{
            width: cardSize.width,
            height: cardSize.height,
          }}
        >
          <Flex>
            <Image
              alt="example"
              src={getViewIconUrl(item.view_icon_name)}
              style={{
                width: cardSize.width * 0.6,
                height: cardSize.height * 0.5,
                objectFit: 'cover',
              }}
            />
            <span>{item.view_name}</span>
          </Flex>
          <Button
            type="text"
            size="small"
            icon={<CloseOutlined />}
            onClick={() => handleRemove(item.internal_id)}
            style={{
              position: 'absolute',
              top: 2,
              right: 2,
              color: '#999',
            }}
            aria-label={String(
              <FormattedMessage
                id="register.selectedProtocol.remove"
                defaultMessage="register.selectedProtocol.remove"
              />
            )}
          />
        </Card>
      ))}
    </Row>
  );
};

export default SelectedProtocolList;