import React from 'react';
import { Row, Col, Collapse, Grid, Divider, Button, Space, Form } from 'antd';
import { FormattedMessage } from 'react-intl';
import BasicInfoForm from './components/register.form';
import SelectedProtocolList from './components/register.selected.view.list';
import RegisterAvailableList from './components/register.available.list';
import { registerWork } from '@/API/patient/workActions';
import useRegisterState from '@/hooks/useRegisterState';

const { useBreakpoint } = Grid;
const { Panel } = Collapse;

const RegisterPage: React.FC = () => {
  const screens = useBreakpoint();
  const [form] = Form.useForm();
  const { selectedViews, currentPatientType } = useRegisterState();

  const handleRegister = async () => {
    try {
      const work = {
        ...form.getFieldsValue(),
        patient_type: currentPatientType?.patient_type_id,
        modality: 'dx',
        study_type: 'Normal',
        views: selectedViews.map((view) => ({
          view_id: view.view_id,
          procedure_id: 'aaa',
        })),
      };
      const response = await registerWork(work);
      console.log('Work registered successfully:', response);
    } catch (error) {
      console.error('Error registering work:', error);
    }
  };

  return (
    <>
      {screens.xl || screens.xxl ? (
        <Row className="flex-1 h-full">
          <Col
            xs={24}
            sm={24}
            md={8}
            lg={8}
            xl={8}
            xxl={8}
            style={{
              display: 'flex',
              flexDirection: 'column',
            }}
            className="h-full"
          >
            <BasicInfoForm form={form} style={{ overflow: 'auto' }} />
          </Col>
          <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className="h-full">
            <RegisterAvailableList />
          </Col>
          <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
            <SelectedProtocolList />
          </Col>
        </Row>
      ) : screens.md || screens.lg ? (
        <Row className="h-full flex-1 ">
          <Col
            xs={24}
            sm={24}
            md={12}
            lg={12}
            className="h-full flex flex-column"
          >
            <BasicInfoForm
              form={form}
              style={{ overflow: 'auto', width: '100%' }}
            />
          </Col>
          <Col xs={24} sm={24} md={12} lg={12}>
            <Row gutter={[0, 16]}>
              <Col span={24}>
                <RegisterAvailableList />
              </Col>
              <Divider />
              <Col span={24}>
                <SelectedProtocolList className="" />
              </Col>
            </Row>
          </Col>
        </Row>
      ) : (
        <Collapse
          accordion
          defaultActiveKey={['1']}
          style={{ overflow: 'auto', height: '100%' }}
        >
          <Panel
            header={
              <FormattedMessage
                id="register.basicInfoPanel"
                defaultMessage="register.basicInfoPanel"
              />
            }
            key="1"
          >
            <BasicInfoForm form={form} />
          </Panel>
          <Panel
            header={
              <FormattedMessage
                id="register.protocolListPanel"
                defaultMessage="register.protocolListPanel"
              />
            }
            key="2"
          >
            <RegisterAvailableList />
          </Panel>
          <Panel
            header={
              <FormattedMessage
                id="register.selectedProtocolListPanel"
                defaultMessage="register.selectedProtocolListPanel"
              />
            }
            key="3"
          >
            <SelectedProtocolList />
          </Panel>
        </Collapse>
      )}
      <Space
        style={{
          position: 'fixed',
          bottom: '20px',
          right: '20px',
          zIndex: 1000,
        }}
      >
        <Button type="primary" onClick={handleRegister}>
          注册
        </Button>
        <Button type="default">检查</Button>
      </Space>
    </>
  );
};

export default RegisterPage;