import React from 'react';
import { Row, Col, Input, Select, Form } from 'antd';
import { RootState, useAppDispatch } from '@/states/store';
import {
  updateField,
  updateDropdown,
  AnimalBaseInfoState,
} from '@/states/patient/DiagnosticReport/animalBaseInfoSlice';
import { useSelector } from 'react-redux';
import { useEffect } from 'react';
import { Task, TaskAnimal } from '@/domain/work';

const { Option } = Select;

export const AnimalBaseInfo: React.FC = () => {
  const data = useSelector((s: RootState) => s.animalBaseInfo);
  const dispatch = useAppDispatch();
  const selectedIds = useSelector(
    (s: RootState) => s.workSelection.selectedIds
  );
  const workEntities = useSelector((s: RootState) => s.workEntities.data);
  console.log(`【诊断报告】：选中的study id ：${selectedIds[0]}`);
  const selectedStudy: Task | TaskAnimal | null =
    selectedIds.length > 0
      ? (workEntities.find((t) => t.StudyID === selectedIds[0]) ?? null)
      : null;

  useEffect(() => {
    console.log(
      `【诊断报告】：selectedStudy是空吗？${selectedStudy === null} ${selectedStudy}`
    );
    if (selectedStudy) {
      const selectedStudyAnimal = selectedStudy as TaskAnimal;
      dispatch(
        updateField({
          key: 'patientName',
          value: selectedStudyAnimal.PatientName,
        })
      );
      dispatch(
        updateField({ key: 'sex', value: selectedStudyAnimal.PatientSex })
      );
      dispatch(
        updateField({ key: 'age', value: selectedStudyAnimal.PatientAge })
      );
      dispatch(
        updateField({ key: 'ownerName', value: selectedStudyAnimal.owner_name })
      );
      // dispatch(
      //   updateField({ key: 'inspectionNumber', value: selectedStudyAnimal.ins })
      // );
      // dispatch(
      //   updateField({ key: 'inspectionMethod', value: selectedStudy.InspectionMethod })
      // );
      // dispatch(
      //   updateField({ key: 'radiologist', value: selectedStudy.Radiologist })
      // );
      // dispatch(
      //   updateField({ key: 'reviewPhysician', value: selectedStudy.ReviewPhysician })
      // );
    }
  }, [selectedIds]);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onChange = (key: keyof AnimalBaseInfoState, val: any) => {
    dispatch(updateField({ key, value: val }));
  };
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onDropdownChange = (key: keyof AnimalBaseInfoState, val: any) => {
    dispatch(updateDropdown({ key, value: val }));
  };

  return (
    <Form layout="vertical">
      <Row gutter={12}>
        <Col span={6}>
          <Form.Item label="患者姓名">
            <Input
              value={data.patientName}
              onChange={(e) => onChange('patientName', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="性别">
            <Select
              value={data.sex}
              onChange={(v) => onDropdownChange('sex', v)}
            >
              <Option value="雄性">雄性</Option>
              <Option value="雌性">雌性</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="年龄">
            <Input
              value={data.age}
              onChange={(e) => onChange('age', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="主人姓名">
            <Input
              value={data.ownerName}
              onChange={(e) => onChange('ownerName', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="申请科室">
            <Input
              value={data.requestingDepartment}
              onChange={(e) => onChange('requestingDepartment', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="检查号">
            <Input
              value={data.inspectionNumber}
              onChange={(e) => onChange('inspectionNumber', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="检查方法">
            <Input
              value={data.inspectionMethod}
              onChange={(e) => onChange('inspectionMethod', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="放射科医生">
            <Input
              value={data.radiologist}
              onChange={(e) => onChange('radiologist', e.target.value)}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="审核医师">
            <Input
              value={data.reviewPhysician}
              onChange={(e) => onChange('reviewPhysician', e.target.value)}
            />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};