import _Radio from "@alifd/next/es/radio";
import _Input from "@alifd/next/es/input";
import _NumberPicker from "@alifd/next/es/number-picker";
import _extends from "@babel/runtime/helpers/extends";
import StyleItemSetter from "../../components/style-item-setter";
import ColorInput from "../../components/color-input";
import { isCssVarBind, isEmptyValue } from "../../utils";
import React, { useMemo } from "react";
import { intlLocal } from "./locale";
var backgroundConfig = intlLocal();
export default 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 = 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.createElement("div", {
    className: "lc-field lc-block-field",
    style: {
      background: "white"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "lc-field-head"
  }, "\u80CC\u666F"), /*#__PURE__*/React.createElement("div", {
    className: "lc-field-body"
  }, /*#__PURE__*/React.createElement(StyleItemSetter.TowColumnLayout, null, /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "背景色",
    dataInput: /*#__PURE__*/React.createElement(ColorInput, _extends({
      styleKey: 'backgroundColor'
    }, props, {
      inputWidth: "100%"
    }))
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "透明度",
    dataInput: /*#__PURE__*/React.createElement(_NumberPicker, {
      style: {
        width: "100%"
      },
      value: !isEmptyValue(styleData.opacity) && !isCssVarBind(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
      disabled: isCssVarBind(styleData.opacity),
      max: 100,
      min: 0,
      onChange: function onChange(val) {
        return _onChange('opacity', isEmptyValue(val) ? null : val / 100);
      },
      innerAfter: '%'
    })
  })), /*#__PURE__*/React.createElement(StyleItemSetter.OneColumn, null, /*#__PURE__*/React.createElement(_Input, {
    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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleItemSetter.OneColumn, null, /*#__PURE__*/React.createElement("div", {
    className: "radiogroup-style"
  }, /*#__PURE__*/React.createElement(_Radio.Group, {
    shape: "button"
  }, RadioOptions.map(function (item) {
    return /*#__PURE__*/React.createElement(_Radio, {
      value: item.label,
      onClick: item.onClick
    }, item.label);
  })))))));
}