import React from 'react';
import { Row, Col, Collapse, Grid, Divider } from 'antd';
import BasicInfoForm from './components/register.form';
import ProtocolList from './components/register.protocol.list';
import SelectedProtocolList from './components/register.selected.protocol.list';

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

const RegisterPage: React.FC = () => {
  const screens = useBreakpoint();

  // xs: <480, sm: ≥576, md: ≥768, lg: ≥992, xl: ≥1200, xxl: ≥1600
  // 优先级：xs/sm（小屏）→ md/lg（中屏）→ xl/xxl（大屏）
  console.log(screens);

  if (screens.xl || screens.xxl) {
    // 大屏幕：三栏布局
    return (
      <Row className="flex-1 h-full">
        <Col
          xs={24}
          sm={24}
          md={8}
          lg={8}
          xl={8}
          xxl={8}
          style={{
            border: '4px solid green',
            display: 'flex',
            flexDirection: 'column',
          }}
          className='h-full'
        >
          <BasicInfoForm style={{ overflow: 'auto' }} />
        </Col>
        <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className='h-full'>
          <ProtocolList />
        </Col>
        <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
          <SelectedProtocolList />
        </Col>
      </Row>
    );
  }

  if (screens.md || screens.lg) {
    // 中屏幕：左右两栏，右侧上下分
    return (
      <Row gutter={16} className='h-full flex-1 '>
        <Col xs={24} sm={24} md={12} lg={12} className='h-full flex flex-column border-8 border-red-400'  >
          <BasicInfoForm style={{ overflow: 'auto' ,width:'100%'}}/>
        </Col>
        <Col xs={24} sm={24} md={12} lg={12}>
          <Row gutter={[0, 16]}>
            <Col span={24}>
              <ProtocolList />
            </Col>
            <Divider />
            <Col span={24}>
              <SelectedProtocolList className="" />
            </Col>
          </Row>
        </Col>
      </Row>
    );
  }

  if (screens.xs || screens.sm) {
    // 小屏幕：手风琴式布局
    return (
      <Collapse accordion defaultActiveKey={['1']} style={{ margin: 16 ,overflow:'auto', height:'100%'}}>
        <Panel header="基本信息表单区域" key="1">
          <BasicInfoForm />
        </Panel>
        <Panel header="待选择协议列表区域" key="2">
          <ProtocolList />
        </Panel>
        <Panel header="已选择协议列表区域" key="3">
          <SelectedProtocolList />
        </Panel>
      </Collapse>
    );
  }
};

export default RegisterPage;