import React from 'react';
import ScrollCard from '@/components/scroll-card';
import { CardProps } from 'antd/es/card';
import { Statistic } from 'antd';
import { List } from '@sensoro/sensoro-design';
import styles from './index.less';
import { ListProps } from '@sensoro/sensoro-design/lib/list';
import useResponsive from '@/common/hooks/use-responsive';

export interface ListCardProps extends CardProps {
  total?: number;
  height?: string | number;
  onLoadMore?: () => Promise<boolean>;
  minItemWidth?: number;
  listStyle?: React.CSSProperties;
  listProps?: ListProps;
}

const valueStyle = {
  color: '#2B6DE5',
  fontSize: 12,
  background: ' #F0F8FF',
  padding: '2px 8px',
  borderRadius: '2px',
};

// 如果有必要可以把这个上啦加载更多的组件封装到组件库
const ListCard: React.FC<ListCardProps> = props => {
  const {
    children,
    title,
    total = 0,
    minItemWidth = 165,
    height,
    onLoadMore,
    listStyle,
    listProps,
    ...rest
  } = props;

  const { container, itemWidth } = useResponsive(minItemWidth);

  return (
    // @ts-ignore
    <ScrollCard
      {...rest}
      height={height ?? '100%'}
      //这里的1px是为了防止滚动时候header的分割线不要被挡住
      bodyStyle={{ padding: `0px` }}
      title={
        title !== null && (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {title && (
              <>
                {title}{' '}
                <span
                  style={{
                    marginLeft: 16,
                    padding: '2px 8px',
                  }}
                >
                  <Statistic
                    value={total}
                    prefix="检索图片数量："
                    valueStyle={valueStyle}
                  />
                </span>
              </>
            )}
          </div>
        )
      }
    >
      <div ref={container.ref} style={{ height: '100%' }}>
        <List
          height="100%"
          className={styles.container}
          //该属性只有chorme支持
          style={listStyle}
          onLoadMore={onLoadMore}
          total={total}
          {...listProps}
        >
          {React.Children.map(children, (child: any) => (
            <div className={styles.item} style={{ width: itemWidth }}>
              {React.cloneElement(child, { width: itemWidth })}
            </div>
          ))}
        </List>
      </div>
    </ScrollCard>
  );
};

export default ListCard;