import React, { useState, useEffect, useMemo } from 'react';
import { computedCuurentGrid } from '../ScrollList/utils';
/**
 * @列表剧中盒子
 * @param {*} props
 */
const ListBox = (props) => {
  const { className = '', children, style = {}, offsetOptions = { xxl: 2, xl: 1 } } = props;
  const [offset, setOffset] = useState(() => {
    const offsetGrad = computedCuurentGrid();
    return offsetOptions[offsetGrad] ? offsetOptions[offsetGrad] : 0;
  });
  useEffect(() => {
    function resize() {
      const offsetGrad = computedCuurentGrid();
      setOffset(offsetOptions[offsetGrad] ? offsetOptions[offsetGrad] : 0);
    }
    window.addEventListener('resize', resize);
    return () => {
      window.removeEventListener('resize', resize);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const paddingRow = useMemo(() => `${offset === 0 ? '20px' : (100 / 24) * offset + '%'}`, [offset]);

  return (
    <div style={style} className={className}>
      {React.cloneElement(children, { paddingRow })}
    </div>
  );
};

export default ListBox;
