import React, { useState } from 'react';
import { Row, Col, Button, Drawer, Grid, Pagination } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { FormattedMessage } from 'react-intl';
import WorklistTable from './components/WorklistTable';
import ArchiveOperationPanel from './components/ArchiveOperationPanel';

const { useBreakpoint } = Grid;

const ArchivelistPage: React.FC = () => {
  const screens = useBreakpoint();
  const [drawerVisible, setDrawerVisible] = useState(false);

  return (
    <div className="h-full">
      {screens.xs ? (
        <>
          <WorklistTable />
          <Button
            type="primary"
            shape="circle"
            icon={<SettingOutlined />}
            className="fixed bottom-6 right-6 z-50"
            onClick={() => setDrawerVisible(true)}
          />
          <Drawer
            title={
              <FormattedMessage
                id="worklist.operationPanel"
                defaultMessage="worklist.operationPanel"
              />
            }
            placement="left"
            onClose={() => setDrawerVisible(false)}
            open={drawerVisible}
            width={300}
          >
            <ArchiveOperationPanel />
          </Drawer>
        </>
      ) : (
        <Row className="h-full flex-1">
          <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
            <WorklistTable />
            <div className="flex justify-center mt-4">
              <Pagination defaultCurrent={1} total={50} />
            </div>
          </Col>
          <Col
            span={screens.lg ? 6 : screens.md ? 4 : 0}
            className="h-full overflow-auto"
          >
            <ArchiveOperationPanel />
          </Col>
        </Row>
      )}
    </div>
  );
};

export default ArchivelistPage;