import React, { useEffect } from 'react';
import ChevronDown from '@pisell/icon/es/ChevronDown';
import UserCircle from '@pisell/icon/es/UserCircle';
import classNames from 'classnames';
import { locales } from '@pisell/utils';
import { PisellInput, PisellGoodPassCard, PisellText, Button } from '@pisell/materials';
import useEngineContext from "../../../../../hooks/useEngineContext";
import localeTexts from "./locales";
import "./index.less";
var VoucherUI = function VoucherUI(_ref) {
  var _context$appHelper;
  var showDetail = _ref.showDetail,
    onToggleDetail = _ref.onToggleDetail,
    isLogin = _ref.isLogin,
    onLoginClick = _ref.onLoginClick,
    availableData = _ref.availableData,
    onDiscountChange = _ref.onDiscountChange,
    mixedSort = _ref.mixedSort,
    code = _ref.code,
    onCodeChange = _ref.onCodeChange,
    onApplyCode = _ref.onApplyCode,
    _ref$codeDisabled = _ref.codeDisabled,
    codeDisabled = _ref$codeDisabled === void 0 ? false : _ref$codeDisabled;
  var context = useEngineContext();
  var utils = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};

  // 初始化多语言
  useEffect(function () {
    var _utils$storage;
    var locale = (utils === null || utils === void 0 || (_utils$storage = utils.storage) === null || _utils$storage === void 0 ? void 0 : _utils$storage.get('umi_locale')) || 'en';
    locales.init(localeTexts, locale);
  }, [utils]);

  // 渲染登录卡片
  var renderLoginCard = function renderLoginCard() {
    if (isLogin) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "login-card"
    }, /*#__PURE__*/React.createElement(UserCircle, {
      style: {
        fontSize: 28
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "text-wrapper"
    }, /*#__PURE__*/React.createElement(PisellText, {
      className: "login-btn",
      onClick: onLoginClick
    }, locales.getText('pisell2.voucher.login')), /*#__PURE__*/React.createElement("span", null, " ", locales.getText('pisell2.voucher.login-tip'))));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__event-booking-voucher-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "voucher-title"
  }, /*#__PURE__*/React.createElement("span", {
    className: "voucher-title-left"
  }, locales.getText('pisell2.voucher.title')), /*#__PURE__*/React.createElement("span", {
    className: "voucher-title-right",
    onClick: onToggleDetail
  }, locales.getText('pisell2.voucher.details'), ' ', /*#__PURE__*/React.createElement(ChevronDown, {
    className: classNames('voucher-right-icon', {
      show: showDetail
    })
  }))), /*#__PURE__*/React.createElement("div", {
    className: classNames('voucher-detail', {
      show: showDetail
    })
  }, (availableData === null || availableData === void 0 ? void 0 : availableData.length) > 0 ? /*#__PURE__*/React.createElement(PisellGoodPassCard, {
    style: {
      width: '100%'
    },
    dataSource: availableData,
    mixedSort: mixedSort,
    onChange: onDiscountChange
  }) : null, renderLoginCard(), /*#__PURE__*/React.createElement("div", {
    className: "voucher-code-input-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "voucher-code-input"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      whiteSpace: 'nowrap'
    }
  }, locales.getText('pisell2.voucher.code'), ":"), /*#__PURE__*/React.createElement(PisellInput, {
    value: code,
    allowClear: true,
    onChange: function onChange(e) {
      var _e$target;
      onCodeChange((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
    },
    size: "small",
    placeholder: locales.getText('pisell2.voucher.enter-code')
  })), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    disabled: codeDisabled,
    onClick: function onClick() {
      return onApplyCode();
    }
  }, locales.getText('pisell2.voucher.apply')))));
};
export default VoucherUI;