import React, { memo, useMemo } from 'react';
import { locales } from '@pisell/utils';
import { Image } from '@pisell/materials';
import "./index.less";

/**
 * UserFooter 组件 Props
 */

/** 默认用户头像 */
var DEFAULT_USER_AVATAR = 'https://pisell2-dev.s3.cn-north-1.amazonaws.com.cn/static/default-avatar.png';

/** 默认店铺图标 */
var DEFAULT_STORE_ICON = 'https://pisell2-dev.s3.cn-north-1.amazonaws.com.cn/static/default-store-icon.png';

/**
 * 获取店铺显示名称
 * @param store 店铺数据
 * @param locale 语言
 */
var getStoreName = function getStoreName(store) {
  var _store$tenant;
  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
  if (!store) return '';
  var name = store === null || store === void 0 || (_store$tenant = store.tenant) === null || _store$tenant === void 0 ? void 0 : _store$tenant.name;
  if (!name) return '';

  // 优先使用对应语言的名称，否则使用 original
  return name[locale] || name.original || '';
};

/**
 * UserFooter 底部用户信息组件
 * @description 展示当前用户和店铺信息，支持切换账号和切换店铺
 */
var UserFooter = /*#__PURE__*/memo(function (props) {
  var _selectedStore$tenant;
  var userInfo = props.userInfo,
    selectedStore = props.selectedStore,
    _props$step = props.step,
    step = _props$step === void 0 ? 'store' : _props$step,
    _props$locale = props.locale,
    locale = _props$locale === void 0 ? 'en' : _props$locale,
    onChangeAccount = props.onChangeAccount,
    onChangeStore = props.onChangeStore,
    _props$isShowChangeSt = props.isShowChangeStore,
    isShowChangeStore = _props$isShowChangeSt === void 0 ? false : _props$isShowChangeSt;

  /** 用户头像 */
  var userAvatar = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) || DEFAULT_USER_AVATAR;

  /** 用户名称 */
  var userName = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || '';

  /** 店铺图标 */
  var storeIcon = (selectedStore === null || selectedStore === void 0 || (_selectedStore$tenant = selectedStore.tenant) === null || _selectedStore$tenant === void 0 ? void 0 : _selectedStore$tenant.logo) || DEFAULT_STORE_ICON;

  /** 店铺名称 */
  var storeName = useMemo(function () {
    return getStoreName(selectedStore, locale);
  }, [selectedStore, locale]);

  /** 是否显示店铺信息（设备选择步骤显示） */
  var showStoreInfo = (step === 'device' || step === 'channel') && selectedStore && isShowChangeStore;

  // 如果没有用户信息，不显示
  if (!userInfo) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: "user-footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "user-footer__user"
  }, /*#__PURE__*/React.createElement("div", {
    className: "user-footer__avatar"
  }, /*#__PURE__*/React.createElement(Image, {
    src: userAvatar,
    alt: userName,
    preview: false,
    width: 44,
    height: 44,
    fallbackType: "avatar"
  })), /*#__PURE__*/React.createElement("div", {
    className: "user-footer__info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "user-footer__name"
  }, userName), /*#__PURE__*/React.createElement("a", {
    className: "user-footer__action",
    onClick: onChangeAccount
  }, locales.getText('webpos-login-change-account')))), showStoreInfo && /*#__PURE__*/React.createElement("div", {
    className: "user-footer__store"
  }, /*#__PURE__*/React.createElement("div", {
    className: "user-footer__avatar"
  }, /*#__PURE__*/React.createElement(Image, {
    src: storeIcon,
    alt: storeName,
    preview: false,
    width: 44,
    height: 44,
    fallbackType: "avatar"
  })), /*#__PURE__*/React.createElement("div", {
    className: "user-footer__info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "user-footer__name",
    title: storeName
  }, storeName), /*#__PURE__*/React.createElement("a", {
    className: "user-footer__action",
    onClick: onChangeStore
  }, locales.getText('webpos-login-change-store')))));
});
UserFooter.displayName = 'UserFooter';
export default UserFooter;