import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { List, Spin, Tag } from 'antd';
// @ts-ignore
import { locales } from '@pisell/utils';
import dayjs from 'dayjs';
import InfiniteScroll from "../InfiniteScroll";
import ClientName from "../../clientName";
import "./index.less";
var ResultListTag = Tag;
var ResultList = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var dataSource = _ref.dataSource,
    hasMore = _ref.hasMore,
    loading = _ref.loading,
    holderTitle = _ref.holderTitle,
    onLoadMore = _ref.onLoadMore,
    onRowClick = _ref.onRowClick,
    translateText = _ref.translateText;
  var scrollContainerRef = useRef(null);
  var scrollContainerIdRef = useRef("client-search-result-list-scroll-".concat(Math.random().toString(36).slice(2)));
  useImperativeHandle(ref, function () {
    return {
      resetScrollPosition: function resetScrollPosition() {
        if (scrollContainerRef.current) {
          scrollContainerRef.current.scrollTop = 0;
          scrollContainerRef.current.scrollLeft = 0;
        }
      }
    };
  });
  var renderHeader = function renderHeader() {
    if (!(dataSource !== null && dataSource !== void 0 && dataSource.length)) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header"
    }, /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header-cell client-search-result-list__cell--name"
    }, locales.getText('pisell2.text.client-search.name')), /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header-cell client-search-result-list__cell--register-time"
    }, locales.getText('pisell2.text.client-search.register-time')), /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header-cell client-search-result-list__cell--membership"
    }, locales.getText('pisell2.text.client-search.membership')), /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header-cell client-search-result-list__cell--contact-info"
    }, locales.getText('pisell2.text.client-search.contact-info')), /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__header-cell client-search-result-list__cell--holder"
    }, holderTitle || locales.getText('pisell2.text.client-search.holder')));
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: scrollContainerRef,
    id: scrollContainerIdRef.current,
    className: "client-search-result-list"
  }, loading && /*#__PURE__*/React.createElement(Spin, {
    spinning: loading || false,
    className: "pisell-client-search-result-loading",
    size: "large"
  }), renderHeader(), /*#__PURE__*/React.createElement(InfiniteScroll, {
    dataLength: dataSource.length,
    next: function next() {
      return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore();
    },
    hasMore: hasMore || false,
    className: "client-search-result-list__infinite",
    loader: /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__message"
    }, locales.getText('pisell2.text.loading')),
    endMessage: /*#__PURE__*/React.createElement("div", {
      className: "client-search-result-list__message"
    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? locales.getText('pisell2.text.no-more-data') : null),
    scrollableTarget: scrollContainerIdRef.current,
    scrollThreshold: "180px"
  }, /*#__PURE__*/React.createElement(List, {
    className: "client-search-result-list__list",
    dataSource: dataSource,
    renderItem: function renderItem(item, index) {
      var _latest_wallet_detail, _item$contacts_info, _item$contacts_info2, _item$contacts_info3, _item$form_record;
      var membershipText = (_latest_wallet_detail = item.latest_wallet_detail) === null || _latest_wallet_detail === void 0 || (_latest_wallet_detail = _latest_wallet_detail.wallet) === null || _latest_wallet_detail === void 0 ? void 0 : _latest_wallet_detail.name;
      var translatedMembershipText = translateText === null || translateText === void 0 ? void 0 : translateText(membershipText);
      return /*#__PURE__*/React.createElement(List.Item, {
        key: item.id,
        className: "client-search-result-list__item"
      }, /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__item-content",
        onClick: function onClick() {
          return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item, index || 0);
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__cell client-search-result-list__cell--name"
      }, /*#__PURE__*/React.createElement(ClientName, {
        dataSource: item
      }), /*#__PURE__*/React.createElement("div", null, item.phone || '-'), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__ellipsis"
      }, item.email || '-')), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__cell client-search-result-list__cell--register-time"
      }, dayjs(item.created_at).format('YYYY-MM-DD') || '-'), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__cell client-search-result-list__cell--membership"
      }, membershipText && translatedMembershipText ? /*#__PURE__*/React.createElement(ResultListTag, {
        color: "gold",
        className: "client-search-result-list__membership-tag"
      }, translatedMembershipText) : '-'), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__cell client-search-result-list__cell--contact-info"
      }, /*#__PURE__*/React.createElement(ClientName, {
        dataSource: item === null || item === void 0 || (_item$contacts_info = item.contacts_info) === null || _item$contacts_info === void 0 ? void 0 : _item$contacts_info.value
      }), /*#__PURE__*/React.createElement("div", null, (item === null || item === void 0 || (_item$contacts_info2 = item.contacts_info) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.value) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.phone) === null || _item$contacts_info2 === void 0 ? void 0 : _item$contacts_info2.phone) || '-'), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__ellipsis"
      }, (item === null || item === void 0 || (_item$contacts_info3 = item.contacts_info) === null || _item$contacts_info3 === void 0 || (_item$contacts_info3 = _item$contacts_info3.value) === null || _item$contacts_info3 === void 0 ? void 0 : _item$contacts_info3.email) || '-')), /*#__PURE__*/React.createElement("div", {
        className: "client-search-result-list__cell client-search-result-list__cell--holder"
      }, (item === null || item === void 0 || (_item$form_record = item.form_record) === null || _item$form_record === void 0 ? void 0 : _item$form_record.length) > 0 ? item.form_record.map(function (itemForm) {
        return /*#__PURE__*/React.createElement("div", {
          key: itemForm === null || itemForm === void 0 ? void 0 : itemForm.id,
          className: "client-search-result-list__ellipsis"
        }, (itemForm === null || itemForm === void 0 ? void 0 : itemForm.main_field) || '-');
      }) : '-')));
    }
  })));
});
export default ResultList;