"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
require("./index.scss");
var _excluded = ["popType", "selectType", "dataList", "value", "prefix", "dialogTitle", "btnText", "options", "onChange"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * 选择器
 */

var CustomSelect = function CustomSelect(_ref) {
  var _finalDataSource$find;
  var popType = _ref.popType,
    _ref$selectType = _ref.selectType,
    selectType = _ref$selectType === void 0 ? 'string' : _ref$selectType,
    _ref$dataList = _ref.dataList,
    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
    value = _ref.value,
    prefix = _ref.prefix,
    _ref$dialogTitle = _ref.dialogTitle,
    dialogTitle = _ref$dialogTitle === void 0 ? '请选择' : _ref$dialogTitle,
    _ref$btnText = _ref.btnText,
    btnText = _ref$btnText === void 0 ? '确认' : _ref$btnText,
    options = _ref.options,
    onChange = _ref.onChange,
    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var _useState = (0, _react.useState)(false),
    visible = _useState[0],
    setVisible = _useState[1];
  var _useState2 = (0, _react.useState)(value),
    tempValue = _useState2[0],
    setTempValue = _useState2[1];
  var _useState3 = (0, _react.useState)(value),
    innerValue = _useState3[0],
    setInnerValue = _useState3[1];

  // Sync internal state when external value actually changes.
  // Note: we intentionally still keep internal state for display,
  // so lowcode can bind `onChange` without wiring `value` back.
  (0, _react.useEffect)(function () {
    setTempValue(value);
    setInnerValue(value);
  }, [value]);
  var _otherProps = otherProps || {};
  var restProps = otherProps || {};
  var committedValue = innerValue;
  var finalDataSource = options !== null && options !== void 0 && options.length ? options : dataList;
  var handleClick = function handleClick() {
    if (popType === 'dialog') {
      setTempValue(committedValue);
      setVisible(true);
    }
  };
  var handleOk = function handleOk() {
    setInnerValue(tempValue);
    onChange === null || onChange === void 0 ? void 0 : onChange(tempValue);
    setVisible(false);
  };
  var handleCancel = function handleCancel() {
    setTempValue(committedValue);
    setVisible(false);
  };
  var handleSelect = function handleSelect(selectedValue) {
    setTempValue(selectedValue);
    if (popType === 'dialog') {
      return;
    }
    setInnerValue(selectedValue);
    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
  };
  var handleBottomChange = handleSelect;
  var renderContent = function renderContent() {
    if (selectType === 'number') {
      return /*#__PURE__*/(0, _react.createElement)(NumberPicker, {
        value: tempValue,
        onChange: handleSelect,
        style: {
          width: '100%'
        }
      });
    }
    if (selectType === 'color') {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "select-options color-options"
      }, finalDataSource.map(function (item) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          key: item.value,
          className: "select-option color-option " + (tempValue === item.value ? 'selected' : ''),
          onClick: function onClick() {
            return handleSelect(item.value);
          },
          style: {
            backgroundColor: item.value
          }
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "color-label"
        }, item.label));
      }));
    }
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "select-options"
    }, finalDataSource.map(function (item) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: item.value,
        className: "select-option " + (tempValue === item.value ? 'selected' : ''),
        onClick: function onClick() {
          return handleSelect(item.value);
        }
      }, item.label);
    }));
  };
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: "custom-select"
  }, _otherProps), popType === 'bottom' ? (/*#__PURE__*/(0, _react.createElement)(_select["default"], (0, _extends2["default"])({}, restProps, {
    label: prefix,
    value: committedValue,
    dataSource: finalDataSource,
    onChange: handleBottomChange
  }))) : popType === 'normal' ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "select-normal"
  }, prefix && /*#__PURE__*/_react["default"].createElement("span", {
    className: "prefix"
  }, prefix), renderContent()) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "select-trigger",
    onClick: handleClick
  }, prefix && /*#__PURE__*/_react["default"].createElement("span", {
    className: "prefix"
  }, prefix), /*#__PURE__*/_react["default"].createElement("span", {
    className: "value"
  }, selectType === 'string' ? ((_finalDataSource$find = finalDataSource.find(function (item) {
    return item.value === committedValue;
  })) === null || _finalDataSource$find === void 0 ? void 0 : _finalDataSource$find.label) || '请选择' : committedValue || '请选择')), /*#__PURE__*/(0, _react.createElement)(_drawer["default"], {
    placement: 'bottom',
    visible: visible,
    title: dialogTitle,
    onClose: handleCancel,
    footerAlign: 'center'
  }, renderContent(), /*#__PURE__*/(0, _react.createElement)(_button["default"], {
    className: 'select-btn',
    onClick: handleOk
  }, btnText))));
};
CustomSelect.displayName = 'CustomSelect';
var _default = exports["default"] = CustomSelect;