"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = BgV2;
var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _styleItemSetter = _interopRequireDefault(require("../../components/style-item-setter"));
var _colorInput = _interopRequireDefault(require("../../components/color-input"));
var _utils = require("../../utils");
var _react = _interopRequireWildcard(require("react"));
var _locale = require("./locale");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var backgroundConfig = (0, _locale.intlLocal)();
function BgV2(props) {
  var onStyleChange = props.onStyleChange,
    styleData = props.styleData;
  function _onChange(styleKey, value) {
    onStyleChange([{
      styleKey: styleKey,
      value: value
    }]);
  }
  var RadioOptions = [{
    label: "等比覆盖",
    onClick: function onClick() {
      onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
        styleKey: "backgroundPosition",
        value: "center"
      }, {
        styleKey: "backgroundRepeat",
        value: "no-repeat"
      }, {
        styleKey: "backgroundAttachment",
        value: "fixed"
      }, {
        styleKey: "backgroundSize",
        value: "cover"
      }]);
    }
  }, {
    label: "等比填充",
    onClick: function onClick() {
      onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
        styleKey: "backgroundPosition",
        value: "center"
      }, {
        styleKey: "backgroundRepeat",
        value: "no-repeat"
      }, {
        styleKey: "backgroundAttachment",
        value: "fixed"
      }, {
        styleKey: "backgroundSize",
        value: "contain"
      }]);
    }
  }];
  var bckImg = (0, _react.useMemo)(function () {
    var url = styleData.backgroundImage;
    if (url) {
      if (url.startsWith("url(")) {
        url = url.slice(4);
      }
      if (url.endsWith(")")) {
        url = url.substring(0, url.length - 1);
      }
      return url;
    } else {
      return null;
    }
  }, [styleData]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "lc-field lc-block-field",
    style: {
      background: "white"
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "lc-field-head"
  }, "\u80CC\u666F"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "lc-field-body"
  }, /*#__PURE__*/_react["default"].createElement(_styleItemSetter["default"].TowColumnLayout, null, /*#__PURE__*/_react["default"].createElement(_styleItemSetter["default"], {
    label: "背景色",
    dataInput: /*#__PURE__*/_react["default"].createElement(_colorInput["default"], (0, _extends2["default"])({
      styleKey: 'backgroundColor'
    }, props, {
      inputWidth: "100%"
    }))
  }), /*#__PURE__*/_react["default"].createElement(_styleItemSetter["default"], {
    label: "透明度",
    dataInput: /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
      style: {
        width: "100%"
      },
      value: !(0, _utils.isEmptyValue)(styleData.opacity) && !(0, _utils.isCssVarBind)(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
      disabled: (0, _utils.isCssVarBind)(styleData.opacity),
      max: 100,
      min: 0,
      onChange: function onChange(val) {
        return _onChange('opacity', (0, _utils.isEmptyValue)(val) ? null : val / 100);
      },
      innerAfter: '%'
    })
  })), /*#__PURE__*/_react["default"].createElement(_styleItemSetter["default"].OneColumn, null, /*#__PURE__*/_react["default"].createElement(_input["default"], {
    addonTextBefore: "\u80CC\u666F\u56FE:url(",
    addonTextAfter: ")",
    value: bckImg,
    onChange: function onChange(value) {
      if (value) {
        onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
          styleKey: "backgroundImage",
          value: "url(" + value + ")"
        }]);
      } else {
        onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
          styleKey: "backgroundImage",
          value: value
        }]);
      }
    }
  })), bckImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styleItemSetter["default"].OneColumn, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "radiogroup-style"
  }, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
    shape: "button"
  }, RadioOptions.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_radio["default"], {
      value: item.label,
      onClick: item.onClick
    }, item.label);
  })))))));
}