import { ActionSheet, InfiniteScroll, List, NavBar, Popup } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

import { MoreOutline } from 'antd-mobile-icons';
import { useState } from 'react';

import { dataListFlat } from '../utils/constant';
import MeasureGroups from '../components/MeasureGroups';
import MeasureItem from '../components/MeasureItem';


export default function UploadList() {
  const navigate = useNavigate();

  const [showMenu, setShowMenu] = useState(false);

  const actions = [
    { text: '重试失败任务', key: 'retry' },
    { text: '清空列表', key: 'clear' },
    { text: '清空已完成任务', key: 'clearCompleted' },
  ]
  
  const back = () => navigate(-1);

  const right = (
    <div
      onClick={() => setShowMenu(!showMenu)}
      className="flex justify-end gap-x-2"
      style={{ fontSize: 24 }}
    >
      <MoreOutline />
    </div>
  );

  return (
    <div>
      <NavBar className="bg-white" onBack={back} right={right}>
        上传数据
      </NavBar>
      <div className="main-page-content">
        <header className="h-8 bg-[#EEE] flex items-center px-4">
          <span>剩余任务10个</span>
          <i className="border-l border-[#999] h-3 mx-2" />
          <span>失败0个</span>
          <p className="ml-auto text-primary">上传中</p>
        </header>
        <main className=" overflow-x-hidden overflow-y-auto">
          <List>
            {dataListFlat.map((item) => (
              <List.Item key={item.id}>
                <MeasureItem item={item} onDetail={() => navigate(`/measure/record/${item.id}`)} />
              </List.Item>
            ))}
            {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
          </List>
        </main>
      </div>
      <ActionSheet
        visible={showMenu}
        actions={actions}
        onClose={() => setShowMenu(false)}
      />
    </div>
  );
}