import React, { useState, useMemo } from 'react';
import './PhoneInput.css';

const CODES = [
  { value: '+86', label: '中国大陆' },
  { value: '+852', label: '香港' },
  { value: '+1', label: '美国' },
  { value: '+81', label: '日本' }
];

export default function PhoneInput({ modelValue = '', placeholder = '请输入手机号', onChange }) {
  const [code, setCode] = useState('+86');
  const [number, setNumber] = useState(modelValue);
  const [focused, setFocused] = useState(false);

  const valid = useMemo(
    () => (code === '+86' ? /^1[3-9]\d{9}$/.test(number) : number.length >= 6 && number.length <= 15),
    [code, number]
  );
  const tipClass = !number ? '' : valid ? 'ok' : 'error';
  const tipText = !number ? '支持中国大陆、香港、美、日等区号' : valid ? '格式正确：' + code + ' ' + number : '手机号格式不正确';

  const onInput = (e) => {
    const v = e.target.value.replace(/\D/g, '').slice(0, 11);
    e.target.value = v;
    setNumber(v);
    if (onChange) onChange(code + ' ' + v);
  };

  return (
    <div>
      <div className={'aa-phone' + (focused ? ' is-focus' : '') + (!valid && number ? ' is-error' : '')}>
        <select className="aa-phone-code" value={code} onChange={(e) => setCode(e.target.value)}>
          {CODES.map((c) => (
            <option key={c.value} value={c.value}>
              {c.value} {c.label}
            </option>
          ))}
        </select>
        <input
          className="aa-phone-input"
          value={number}
          inputMode="numeric"
          placeholder={placeholder}
          onInput={onInput}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        />
      </div>
      <div className={'aa-phone-tip ' + tipClass}>{tipText}</div>
    </div>
  );
}