"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _antd = require("antd");

var _indexModule = _interopRequireDefault(require("./index.module.less"));

var _common = require("../../../common");

var _TextConfig = require("../TextConfig");

var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var __extends = void 0 && (void 0).__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) {
        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");

    _extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};
/* eslint-disable react/no-this-in-sfc */


var ButtonConfig =
/** @class */
function (_super) {
  __extends(ButtonConfig, _super);

  function ButtonConfig() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.state = {
      isHover: false
    };

    _this.onChangeButtonIcon = function (icon) {
      var data = _this.props.data;
      var isHover = _this.state.isHover;

      if (isHover) {
        _this.updateAttr(data.hover.buttonIcon, 'iconUrl', icon);
      } else {
        _this.updateAttr(data.buttonIcon, 'iconUrl', icon);
      }
    };

    _this.updateAttr = function (data, key, value) {
      data[key] = value;

      _this.selfRender();
    };

    return _this;
  }

  ButtonConfig.prototype.render = function () {
    var _this = this;

    var data = this.props.data;

    if (!data.hover) {
      data.hover = {
        open: false,
        content: __assign({}, data.content),
        buttonText: __assign({}, data.buttonText),
        buttonBorder: __assign({}, data.buttonBorder),
        buttonIcon: __assign({}, data.buttonIcon)
      };
    }

    var contentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
      split: true,
      title: "URL"
    }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
      onChange: function onChange(value) {
        _this.updateAttr(data.content, 'url', value);
      },
      value: data.content.url
    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "Button Color"
    }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
      onChange: function onChange(value) {
        _this.updateAttr(data.content, 'backgroundColor', value);
      },
      value: data.content.backgroundColor
    })));

    var ButtonTextSetting = function ButtonTextSetting(data) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "Font Style"
      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
        onChange: function onChange(v) {
          var findOne = _TextConfig.sizeTypeList.find(function (t) {
            return t.key == v;
          });

          _extends(data, __assign(__assign({}, findOne), {
            sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
          }));

          _this.selfRender();
        },
        value: data.sizeType
      }, _TextConfig.sizeTypeList.map(function (sizeType) {
        return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
          value: sizeType.key
        }, sizeType.key);
      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "font Family"
      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
        onChange: function onChange(v) {
          _this.updateAttr(data, 'fontFamily', v);
        },
        value: data.fontFamily
      }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
        value: "Montserrat"
      }, "Montserrat"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
        value: "Open Sans"
      }, "Open Sans"))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "font Weight"
      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
        onChange: function onChange(v) {
          _this.updateAttr(data, 'fontWeight', v);
        },
        value: data.fontWeight
      }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
        value: 400
      }, "Regular"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
        value: 600
      }, "Medium"))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "Font Size"
      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
        onChange: function onChange(_a) {
          var count = _a.count;

          _this.updateAttr(data, 'fontSize', count);
        },
        unit: "px",
        value: {
          count: data.fontSize
        }
      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: ""
      }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
        onChange: function onChange(value) {
          _extends(data, value);

          _this.selfRender();
        },
        value: data
      })));
    };

    var ButtonBorderSetting = function ButtonBorderSetting(data) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
        split: true,
        title: "Border Color"
      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
        onChange: function onChange(value) {
          _this.updateAttr(data, 'borderColor', value);
        },
        value: data.borderColor
      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "Border Radius"
      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
        maxVal: 20,
        onChange: function onChange(_a) {
          var count = _a.count;

          _this.updateAttr(data, 'borderRadius', count);
        },
        value: {
          count: data.borderRadius
        }
      })));
    };

    var ButtonIconSetting = function ButtonIconSetting(data) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "Icon"
      }, /*#__PURE__*/_react["default"].createElement(_common.IconPicker, {
        onChange: function onChange(icon) {
          return _this.onChangeButtonIcon(icon);
        },
        onClick: function onClick() {
          _this.setState({
            isHover: data == _this.props.data.hover.buttonIcon
          });
        },
        value: data.iconUrl
      })), data.iconUrl && /*#__PURE__*/_react["default"].createElement(_common.Field, {
        title: "Icon Placement"
      }, /*#__PURE__*/_react["default"].createElement(_common.ButtonIconLayout, {
        icon: data.iconUrl,
        onChange: function onChange(value) {
          return _this.updateAttr(data, 'layout', value);
        },
        value: data.layout
      })));
    };

    var hoverSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
      split: true,
      title: "Button Color"
    }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
      onChange: function onChange(value) {
        _this.updateAttr(data.hover.content, 'backgroundColor', value);
      },
      value: data.hover.content.backgroundColor
    })), /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
      source: [{
        key: '1',
        name: 'Button Text Setting',
        value: ButtonTextSetting(data.hover.buttonText)
      }, {
        key: '2',
        name: 'Button Border Setting',
        value: ButtonBorderSetting(data.hover.buttonBorder),
        toggleType: 'checkbox',
        metaOption: data.hover.buttonBorder
      }, {
        key: '3',
        name: 'Button Icon Setting',
        value: ButtonIconSetting(data.hover.buttonIcon)
      }],
      type: "arrow"
    }));

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _indexModule["default"].container
    }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
      divider: "dashed",
      headerSize: "small",
      onRefresh: this.selfRender,
      source: [{
        key: '1',
        name: 'Content',
        value: contentSetting
      }, {
        key: '2',
        name: 'Button Text Setting',
        value: ButtonTextSetting(data.buttonText)
      }, {
        key: '3',
        name: 'Button Border Setting',
        value: ButtonBorderSetting(data.buttonBorder),
        toggleType: 'checkbox',
        metaOption: data.buttonBorder
      }, {
        key: '4',
        name: 'Button Icon Setting',
        value: ButtonIconSetting(data.buttonIcon)
      }, {
        key: '5',
        name: 'Hover',
        value: hoverSetting,
        toggleType: 'checkbox',
        metaOption: data.hover
      }],
      type: "arrow"
    }));
  };

  ButtonConfig.defaultProps = {
    data: {
      content: {
        url: '',
        backgroundColor: '#2F54EB'
      },
      buttonText: {
        sizeType: '',
        fontFamily: 'Open Sans',
        fontWeight: 600,
        fontSize: 14,
        fontStyle: 'normal',
        color: '#fff'
      },
      buttonBorder: {
        open: false,
        borderColor: '',
        borderRadius: 0
      },
      buttonIcon: {
        iconUrl: '',
        layout: 'right'
      },
      id: '',
      text: 'Button',
      hover: null
    }
  };
  return ButtonConfig;
}(_BaseConfig["default"]);

var _default = ButtonConfig;
exports["default"] = _default;