import css from './index.module.css';
import {FC} from 'react';
import icon from '@assets/images/screen/data.webp';
import AutoListSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {useInfiniteScroll} from './hooks';
import classNames from 'classnames';
import {useContextSection} from '@hooks';
import {context} from '../context';

const List: FC = function () {
  const data = useContextSection(context, state => state[0]?.list ?? []);

  const [{scrollRef, listData, smooth}, {onElementSizeChange, onScroll}] =
    useInfiniteScroll(data);

  return (
    <div className={css.list}>
      <h3 className={css.title}>
        <img src={icon} />
        <p>入库物料数据</p>
      </h3>

      <div className={css.header}>
        <span>序号</span>
        <span>供应商</span>
        <span>采购订单号</span>
        <span>物料编号</span>
        <span>物料名称</span>
        <span>数量</span>
        <span>预计到货时间</span>
      </div>
      <div className={css.listGroup}>
        <AutoListSizer>
          {function ({height, width}) {
            onElementSizeChange(height ?? 0);
            return (
              <FixedSizeList
                itemCount={listData.length}
                width={width ?? 0}
                height={height ?? 0}
                itemSize={54}
                className={classNames({[css.virtualized]: smooth})}
                ref={scrollRef}
                onScroll={onScroll}
              >
                {function ({style, index}) {
                  const {
                    idx,
                    company,
                    materialCode,
                    materialName,
                    order,
                    date,
                    num,
                  } = listData[index];
                  return (
                    <p style={{...style}}>
                      <span>{idx}</span>
                      <span>{company}</span>
                      <span>{order}</span>
                      <span>{materialCode}</span>
                      <span>{materialName}</span>
                      <span>{num}</span>
                      <span>{date}</span>
                    </p>
                  );
                }}
              </FixedSizeList>
            );
          }}
        </AutoListSizer>
      </div>
    </div>
  );
};

export default List;
