import _Pagination from "@alifd/next/es/pagination";
import _List3 from "@alifd/next/es/list";
import _Avatar from "@alifd/next/es/avatar";
import _Box from "@alifd/next/es/box";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["Type", "header", "size", "loading", "style", "footer", "data", "title", "extra", "img", "content", "row1Color", "row2Color", "actionType", "Pagesize"];
/* eslint-disable @typescript-eslint/no-shadow */
import * as React from 'react';
import { useState, useEffect } from 'react';
import "./index.less";
// import InfiniteScroll from 'react-infinite-scroll-component';

var myList = function myList(_ref) {
  var Type = _ref.Type,
    header = _ref.header,
    size = _ref.size,
    loading = _ref.loading,
    style = _ref.style,
    footer = _ref.footer,
    data = _ref.data,
    title = _ref.title,
    extra = _ref.extra,
    img = _ref.img,
    content = _ref.content,
    row1Color = _ref.row1Color,
    row2Color = _ref.row2Color,
    actionType = _ref.actionType,
    Pagesize = _ref.Pagesize,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useState = useState(true),
    divider = _useState[0],
    setDivider = _useState[1];
  var _useState2 = useState([]),
    buttonList = _useState2[0],
    setButtonList = _useState2[1];
  var _useState3 = useState('点击加载更多'),
    tips = _useState3[0],
    setTips = _useState3[1];
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useState4 = useState(false),
    twoToneColor = _useState4[0],
    setTwoToneColor = _useState4[1];
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useState5 = useState(10),
    endNum = _useState5[0],
    setEndNum = _useState5[1];
  var _useState6 = useState([]),
    Datas = _useState6[0],
    setDatas = _useState6[1];
  var _useState7 = useState(0),
    current = _useState7[0],
    setCurrent = _useState7[1];
  // const myList =InputTypeList[InputType]
  var _style = style || {};
  _style['height'] = _style['height'] ? _style['height'] : '30px';
  _style['width'] = _style['width'] ? _style['width'] : '300px';
  var _otherProps = otherProps || {};
  _otherProps.style = _style;
  useEffect(function () {
    if (Type === '基础') {
      setDivider(false);
      setTwoToneColor(false);
    } else if (Type === '斑马线') {
      setTwoToneColor(true);
    } else {
      setDivider(true);
      setTwoToneColor(false);
    }
  }, [Type]);
  useEffect(function () {
    if (Array.isArray(extra)) {
      console.log(extra);
      setButtonList(extra);
    }
    if (footer) {
      if (['翻页加载', '滚动加载'].includes(footer)) {
        var list = [].concat(data);
        var _List = list.splice(current, 10 * (current + 1));
        setDatas(_List);
      }
    }
    if (current) {
      var _list = [].concat(data);
      var _List2 = _list.splice(0, 10 * (current + 1));
      setTimeout(function () {
        setDatas(_List2);
      }, 5000);
    }
  }, [extra, footer, current]);
  var actions = /*#__PURE__*/React.createElement(_Box, {
    direction: "row",
    align: "center",
    style: {
      whiteSpace: 'nowrap',
      height: '100%',
      paddingLeft: 100
    }
  }, buttonList.map(function (item) {
    return /*#__PURE__*/React.createElement(_Button, {
      text: true,
      type: "primary",
      style: {
        marginLeft: 10,
        marginRight: 10
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: item.icon
    }), " ", item.children);
  }));
  var loadingMore = function loadingMore() {
    if (tips === '收起') {
      setEndNum(Pagesize);
      setTips('点击加载更多');
    } else {
      setEndNum(data.length);
      setTips('收起');
    }
  };
  var onChange = function onChange(current01) {
    var list = [].concat(data);
    var List = [];
    if (['滚动加载'].includes(footer)) {
      setCurrent(current + 1);
    } else {
      List = list.splice(10 * (current01 - 1), 10);
    }
    setDatas(List);
  };
  var Content = function Content() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_List3, {
      size: size,
      header: header,
      dataSource: ['翻页加载', '滚动加载'].includes(footer) ? Datas : data,
      divider: divider,
      loading: loading,
      renderItem: function renderItem(item, i) {
        return i + 1 <= endNum && footer === '点击加载' || footer !== '点击加载' ? /*#__PURE__*/React.createElement(_List3.Item, {
          key: i,
          extra: Array.isArray(extra) ? actions : item[extra],
          title: item[title],
          media: img === '' ? null : /*#__PURE__*/React.createElement(_Avatar, {
            src: item[img]
          }),
          style: twoToneColor ? {
            backgroundColor: i % 2 === 0 ? row1Color : row2Color,
            paddingRight: '20px',
            paddingLeft: '20px'
          } : {
            paddingRight: '20px',
            paddingLeft: '20px'
          }
        }, item[content]) : null;
      },
      emptyContent: /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u5185\u5BB9")
    }), footer === '点击加载' ? /*#__PURE__*/React.createElement("div", {
      style: {
        height: 100,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'rgb(205 198 198)'
      },
      onClick: loadingMore
    }, tips) : null, footer === '翻页加载' ? /*#__PURE__*/React.createElement("div", {
      style: {
        height: 50,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        margin: 20
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        color: 'rgb(205 198 198)'
      }
    }, "\u5171", /*#__PURE__*/React.createElement("a", {
      style: {
        marginLeft: 5,
        marginRight: 5,
        color: 'rgb(205 198 198)'
      }
    }, data.length), "\u9879\u6570\u636E"), /*#__PURE__*/React.createElement(_Pagination, {
      total: data.length,
      showJump: false,
      type: "normal",
      size: "large",
      onChange: onChange
    })) : null);
  };
  return footer === '滚动加载' ? /*#__PURE__*/React.createElement(InfiniteScroll, {
    dataLength: Datas.length,
    next: onChange,
    height: 400,
    loader: /*#__PURE__*/React.createElement("div", {
      style: {
        height: 100,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(_Button, {
      type: "secondary",
      loading: true,
      text: true,
      style: {
        color: 'rgb(205 198 198)'
      }
    }, "\u6B63\u5728\u52A0\u8F7D\u4E2D,\u8BF7\u7A0D\u540E")),
    hasMore: Datas.length < data.length
  }, Content()) : Content();
};
myList.displayName = 'myList';
export default myList;