function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState, useMemo } from 'react';
import { Input, Select, Space } from 'antd';
import { useTextInputState } from '@pisell/utils';
import { formatPhone, getCountryCodes, getMaxLength } from "../utils";
/**
 * PisellPhone 编辑态视图组件
 *
 * 负责渲染编辑态的电话号码输入，包含国家码选择器和号码输入框
 *
 * 功能：
 * - 国家码选择器（下拉，支持搜索）
 * - 电话号码输入（只保留数字）
 * - 自动格式化（根据国家码）
 * - 动态设置最大长度（根据国家码）
 * - 实时或失焦校验
 * - 错误提示展示
 *
 * @param props 组件 Props
 */
var EditView = function EditView(props) {
  var _useState = useState(props.countryCode || props.defaultCountryCode || '+86'),
    _useState2 = _slicedToArray(_useState, 2),
    countryCode = _useState2[0],
    setCountryCode = _useState2[1];

  // 获取国家码列表（根据配置过滤和排序）
  var countryCodes = useMemo(function () {
    return getCountryCodes(props);
  }, [props]);

  // 状态管理（复用）
  var _useTextInputState = useTextInputState(props),
    value = _useTextInputState.value,
    isValid = _useTextInputState.isValid,
    errors = _useTextInputState.errors,
    handleChange = _useTextInputState.handleChange,
    handleBlur = _useTextInputState.handleBlur,
    handleFocus = _useTextInputState.handleFocus;

  // 处理输入（只保留数字，自动格式化）
  var handlePhoneChange = function handlePhoneChange(e) {
    var inputValue = e.target.value;
    var cleaned = inputValue.replace(/\D/g, ''); // 只保留数字

    if (props.autoFormat !== false) {
      var formatted = formatPhone(cleaned, countryCode);
      handleChange(formatted);
    } else {
      handleChange(cleaned);
    }
  };

  // 国家码变更
  var handleCountryCodeChange = function handleCountryCodeChange(code) {
    var _props$onCountryCodeC;
    setCountryCode(code);
    (_props$onCountryCodeC = props.onCountryCodeChange) === null || _props$onCountryCodeC === void 0 || _props$onCountryCodeC.call(props, code);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-phone-edit"
  }, /*#__PURE__*/React.createElement(Space.Compact, {
    style: {
      width: '100%'
    }
  }, props.showCountrySelector !== false && /*#__PURE__*/React.createElement(Select, {
    value: countryCode,
    onChange: handleCountryCodeChange,
    style: {
      width: 100,
      height: 48
    },
    showSearch: true,
    optionFilterProp: "children",
    className: "pisell-phone-country-select"
    // 自定义选中后的显示内容（只显示 +xx）
    ,
    optionLabelProp: "value"
    // 下拉选项宽度（比选择器本身宽）
    ,
    popupMatchSelectWidth: false,
    dropdownStyle: {
      minWidth: 200
    }
  }, countryCodes.map(function (country, index) {
    return /*#__PURE__*/React.createElement(Select.Option, {
      key: "".concat(country.code, "-").concat(country.name, "-").concat(index),
      value: country.code
    }, /*#__PURE__*/React.createElement(Space, {
      size: 4
    }, /*#__PURE__*/React.createElement("span", null, country.flag), /*#__PURE__*/React.createElement("span", null, country.code), /*#__PURE__*/React.createElement("span", null, country.name)));
  })), /*#__PURE__*/React.createElement(Input, {
    value: value,
    onChange: handlePhoneChange,
    onBlur: handleBlur,
    onFocus: handleFocus,
    placeholder: props.placeholder || '请输入电话号码',
    maxLength: props.maxLength || getMaxLength(countryCode, countryCodes),
    allowClear: props.allowClear,
    disabled: props.disabled,
    autoFocus: props.autoFocus,
    status: isValid ? undefined : 'error',
    className: props.className,
    style: props.style,
    "aria-label": props['aria-label'],
    "aria-describedby": props['aria-describedby']
  })), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "pisell-phone-error"
  }, errors[0]));
};
export default EditView;