import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Card, Row, Col, Empty } from 'antd';

import type { RootState } from '@/states/store'; // 假设RootState已定义
import { View } from '@/states/patient/viewSelection';
import { addSelectedView } from '@/states/patient/viewSelection';

const RegisterViewList: React.FC = () => {
  // 监听selectedViews
  const availableViews = useSelector(
    (state: RootState) => state.viewSelection.availableViews
  );
  const dispatch = useDispatch();

  const handleCardClick = (view: View) => {
    dispatch(addSelectedView(view));
  };

  return (
    <div>
      <Row gutter={[16, 16]}>
        {availableViews.length === 0 ? (
          <Col span={24}>
            <Empty description="暂无已选择体位" />
          </Col>
        ) : (
          availableViews.map((view) => (
            <Col key={view.internal_id} xs={24} sm={12} md={8} lg={6}>
              {/* 若有自定义ProcedureViewCard组件可替换Card */}
              <Card
                title={view.view_name}
                bordered
                onClick={() => handleCardClick(view)}
              >
                <div>{view.view_description}</div>
                {/* 可根据需要展示更多字段 */}
              </Card>
            </Col>
          ))
        )}
      </Row>
    </div>
  );
};

export default RegisterViewList;