import { useMemoizedFn } from 'ahooks';
import React, { useMemo } from 'react';
import useEngineContext from "../../../../hooks/useEngineContext";
import { withResponsive } from "../../../../responsive";
import { ClientSelector } from "./ClientSelector";
import "./index.less";
function ClientBase(_ref) {
  var _context$appHelper;
  var clientContext = _ref.context,
    className = _ref.className,
    isShowAvatar = _ref.isShowAvatar,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    variant = _ref.variant;
  var context = useEngineContext();
  var customerState = clientContext.customer;
  var selectedCustomer = customerState.selected;
  var translationOriginal = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.translationOriginal;
  var clientCardProps = useMemo(function () {
    var _selectedCustomer$lat;
    var walletName = selectedCustomer === null || selectedCustomer === void 0 || (_selectedCustomer$lat = selectedCustomer.latest_wallet_detail) === null || _selectedCustomer$lat === void 0 || (_selectedCustomer$lat = _selectedCustomer$lat.wallet) === null || _selectedCustomer$lat === void 0 ? void 0 : _selectedCustomer$lat.name;
    if (!walletName) return undefined;
    return {
      tags: [{
        children: (translationOriginal === null || translationOriginal === void 0 ? void 0 : translationOriginal(walletName)) || walletName,
        color: 'gold'
      }],
      tag: {
        placement: 'inline'
      }
    };
  }, [selectedCustomer, translationOriginal]);
  var handleSelectClient = useMemoizedFn(function (record) {
    customerState.select(record);
  });
  var handleContactsInfoChange = useMemoizedFn(function (contactsInfo) {
    clientContext.sales.setContactsInfo(contactsInfo);
  });
  var handleOpenCustomerDetail = useMemoizedFn(function (record, onSuccess) {
    var _context$appHelper2;
    var action = (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.action;
    if (!action || !(record !== null && record !== void 0 && record.id)) return;
    action({
      type: 'pisell1.handleOpenCustomerModal',
      data: {
        id: record.id
      },
      callback: onSuccess
    });
  });
  return /*#__PURE__*/React.createElement(ClientSelector, {
    className: className,
    value: selectedCustomer,
    list: customerState.list,
    loading: customerState.loading,
    loadingMore: customerState.loadingMore,
    hasMore: customerState.hasMore,
    pagination: customerState.pagination,
    isShowAvatar: isShowAvatar,
    variant: variant,
    readOnly: readOnly,
    clientCardProps: clientCardProps,
    onSearch: customerState.search,
    onLoadMore: customerState.loadMore,
    onChangePage: customerState.changePage,
    onSelect: handleSelectClient,
    onAddToFirst: function onAddToFirst(record) {
      customerState.addToFirst(record);
    },
    resolveContactsInfo: function resolveContactsInfo(record) {
      var _contacts_info;
      return (record === null || record === void 0 || (_contacts_info = record.contacts_info) === null || _contacts_info === void 0 ? void 0 : _contacts_info.value) || null;
    },
    onContactsInfoChange: handleContactsInfoChange,
    onOpenCustomerDetail: handleOpenCustomerDetail
  });
}
ClientBase.displayName = 'Client';
export var Client = withResponsive(ClientBase);