import React, { useEffect, useState } from 'react';
import { Row, Col, Input, Select, Form } from 'antd';
import { RootState, useAppSelector, useAppDispatch } from '@/states/store';
import { FormattedMessage } from 'react-intl';
import { useDiagnosticData } from '@/hooks/useDiagnosticData';
import { updateReportField } from '@/states/patient/DiagnosticReport/slice';
import { PlusOutlined } from '@ant-design/icons';
import { DepartmentModal } from './DepartmentModal';
import { getDepartment } from '@/API/report/ReportActions';
import { setDepartments } from '@/states/patient/DiagnosticReport/departmentSlice';
import { getOption } from '@/API/system/options';
import { setOptionSex } from '@/states/system/optionSlice';

export const AnimalBaseInfo: React.FC = () => {
  const dispatch = useAppDispatch();
  const [departmentOpen, setDepartmentOpen] = useState(false);
  // 报告信息
  const [name, setName] = useDiagnosticData('headers.name');
  const [sex, setSex] = useDiagnosticData('headers.sex');
  const [age, setAge] = useDiagnosticData('headers.age');
  const [ownerName, setOwnerName] = useDiagnosticData('headers.owner_name');
  const [requestingDepartment, setRequestingDepartment] = useDiagnosticData(
    'headers.requesting_department'
  );
  const [inspectionNumber, setInspectionNumber] = useDiagnosticData(
    'headers.inspection_number'
  );
  const [inspectionMethod, setInspectionMethod] = useDiagnosticData(
    'headers.inspection_method'
  );
  const [radiologist, setRadiologist] = useDiagnosticData('radiologist');
  const [reviewPhysician, setReviewPhysician] =
    useDiagnosticData('review_physician');

  const reportInfo = useAppSelector((state) => state.diagnosticReport?.report);

  const selectedIds = useAppSelector(
    (s: RootState) => s.workSelection.selectedIds
  );
  const productName = useAppSelector((s: RootState) => s.product.productName);
  const departments = useAppSelector(
    (state: RootState) => state.department.departments
  );
  const optionSex = useAppSelector((state: RootState) => state.options.sex);
  console.log(`【诊断报告】：选中的study id ：${selectedIds[0]}`);
  const getDepartmentData = async () => {
    const res = await getDepartment({});
    if (res.code === '0x000000') {
      dispatch(setDepartments(res?.data?.departments || []));
    }
  };

  const getSexOption = async () => {
    const res = await getOption({ group: 'patient', flag: 'sex' });
    if (res.code === '0x000000') {
      dispatch(setOptionSex(res?.data?.option || []));
    }
  };

  useEffect(() => {
    getDepartmentData();
    getSexOption();
  }, []);

  return (
    <>
      <Form layout="vertical">
        <Row gutter={12}>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id={'animal.register.patientType'}
                  defaultMessage={'animal.register.patientType'}
                />
              }
            >
              <Input
                disabled
                value={reportInfo?.headers?.patient_type}
                onChange={(e) =>
                  dispatch(
                    updateReportField({
                      path: 'report.headers.patient_type',
                      value: e.target.value,
                    })
                  )
                }
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id={
                    productName === 'VETDROS'
                      ? 'animal.register.patientName'
                      : 'register.patientName'
                  }
                  defaultMessage={
                    productName === 'VETDROS'
                      ? 'animal.register.patientName'
                      : 'register.patientName'
                  }
                />
              }
            >
              <Input
                disabled
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="register.gender"
                  defaultMessage="register.gender"
                />
              }
            >
              <Select
                disabled
                value={sex}
                onChange={(v) => setSex(v)}
                fieldNames={{ label: 'text' }}
                options={optionSex}
              ></Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="register.age"
                  defaultMessage="register.age"
                />
              }
            >
              <Input
                disabled
                value={age}
                onChange={(e) => setAge(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="register.owner_name"
                  defaultMessage="register.owner_name"
                />
              }
            >
              <Input
                value={ownerName as string}
                onChange={(e) => setOwnerName(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="report.requestingDepartment"
                  defaultMessage="report.requestingDepartment"
                />
              }
            >
              <Select
                style={{ width: '90%' }}
                value={requestingDepartment}
                fieldNames={{ label: 'department', value: 'department' }}
                onChange={(v) => setRequestingDepartment(v)}
                options={departments}
              />
            </Form.Item>
            <PlusOutlined
              style={{
                position: 'absolute',
                top: '40px',
                right: '10px',
                cursor: 'pointer',
                transition: 'all 0.3s',
              }}
              onClick={() => setDepartmentOpen(true)}
            />
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="report.inspectionNumber"
                  defaultMessage="report.inspectionNumber"
                />
              }
            >
              <Input
                value={inspectionNumber}
                onChange={(e) => setInspectionNumber(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="report.inspectionMethod"
                  defaultMessage="report.inspectionMethod"
                />
              }
            >
              <Input
                value={inspectionMethod}
                onChange={(e) => setInspectionMethod(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="report.radiologist"
                  defaultMessage="report.radiologist"
                />
              }
            >
              <Input
                value={radiologist}
                onChange={(e) => setRadiologist(e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <FormattedMessage
                  id="report.reviewPhysician"
                  defaultMessage="report.reviewPhysician"
                />
              }
            >
              <Input
                value={reviewPhysician}
                onChange={(e) => setReviewPhysician(e.target.value)}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <DepartmentModal
        visible={departmentOpen}
        onClose={() => setDepartmentOpen(false)}
      />
    </>
  );
};