"use strict";

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

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

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

require("./index.less");

var _coreUtil = require("../../../../../utils/coreUtil");

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

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 (b.hasOwnProperty(p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    _extendStatics(d, b);

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

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

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

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

    _this.reRender = function () {
      (0, _coreUtil.renderPreview)();

      _this.setState({});
    };

    return _this;
  }

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

    var setting = this.props.setting;

    var autoplaySetting = /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "How long between slides (secs)"
    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
      maxVal: 60,
      minVal: 1,
      onChange: function onChange(value) {
        setting.autoplay.interval = value.count;

        _this.reRender();
      },
      unit: "s",
      value: {
        count: setting.autoplay.interval
      }
    }));

    var navigationSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "Navigation arrow"
    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
      needColor: true,
      onChange: function onChange(value) {
        setting.navigation.size = value.count;
        setting.navigation.color = value.color;

        _this.reRender();
      },
      unit: "px",
      value: {
        count: setting.navigation.size,
        color: setting.navigation.color
      }
    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "Selected arrow"
    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
      needColor: true,
      onChange: function onChange(value) {
        setting.navigation.hoverSize = value.count;
        setting.navigation.hoverColor = value.color;

        _this.reRender();
      },
      unit: "px",
      value: {
        count: setting.navigation.hoverSize,
        color: setting.navigation.hoverColor
      }
    })));

    var dotsSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "Slide button"
    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
      needColor: true,
      onChange: function onChange(value) {
        setting.dots.size = value.count;
        setting.dots.color = value.color;

        _this.reRender();
      },
      unit: "px",
      value: {
        count: setting.dots.size,
        color: setting.dots.color
      }
    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
      title: "Selected button"
    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
      needColor: true,
      onChange: function onChange(value) {
        setting.dots.hoverSize = value.count;
        setting.dots.hoverColor = value.color;

        _this.reRender();
      },
      unit: "px",
      value: {
        count: setting.dots.hoverSize,
        color: setting.dots.hoverColor
      }
    })));

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "carousel_setting"
    }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
      divider: "dashed",
      onRefresh: this.reRender,
      source: [{
        key: '1',
        name: 'Autoplays',
        value: autoplaySetting,
        metaOption: setting.autoplay,
        toggleType: 'switch'
      }, {
        key: '2',
        name: 'Show navigation arrow',
        value: navigationSetting,
        metaOption: setting.navigation,
        toggleType: 'switch'
      }, {
        key: '3',
        name: 'Show slide button',
        value: dotsSetting,
        metaOption: setting.dots,
        toggleType: 'switch'
      }]
    }));
  };

  CarouselConfigSetting.defaultProps = {
    setting: {
      autoplay: {
        open: false,
        interval: 4
      },
      navigation: {
        open: false,
        size: 16,
        color: '#384966',
        hoverSize: 16,
        hoverColor: '#384966'
      },
      dots: {
        open: false,
        size: 16,
        color: '#fff',
        hoverSize: 16,
        hoverColor: '#fff'
      }
    }
  };
  return CarouselConfigSetting;
}(_react["default"].Component);

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