import React, { useState } from 'react'
import useRequest from '@ahooksjs/use-request'

import { Input, message, Row, Modal, Col, Select } from 'antd'

import { PersonalService } from 'Personal/Personal.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/ApplyAdivise.module.scss'

const { Option } = Select
interface IApplyPhoneNumberProps {
  visible: boolean
  phone: string
  onCloseModel: () => void
}

/**
 * 设置外呼号码
 */
const ApplyPhoneNumber: React.FC<IApplyPhoneNumberProps> = props => {
  const { visible, phone, onCloseModel } = props
  const login2p = useLogin2p()

  const [phoneArea, setPhoneArea] = useState<number>(86)
  const [mobile, setMobile] = useState<string>()
  const phoneAreaList = [
    { id: 86, optionName: '中国(+86)', regText: /^1\d{10}$/ },
    { id: 853, optionName: '中国澳门(+853)', regText: /^6\d{7}$/ },
    { id: 852, optionName: '中国香港(+852)', regText: /^[569]\d{3}\-?\d{4}$/ },
    { id: 61, optionName: '澳大利亚(+61)', regText: /^4\d{8}$/ },
    { id: 65, optionName: '新加坡(+65)', regText: /^[89]\d{7}$/ },
    { id: 1, optionName: '美国(+001)', regText: /^[2-9]\d{2}[2-9](?!11)\d{6}$/ },
    { id: 81, optionName: '日本(+81)', regText: /^\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/ },
    { id: 44, optionName: '英国(+44)', regText: /^\+?[0-9,\-,\s]{5,20}$/ },
    { id: 886, optionName: '中国台湾(+886)', regText: /^[0][9]\d{8}$/ }
  ]

  const { run } = useRequest(PersonalService.postOutboundMobile, {
    manual: true,
    onSuccess: res => {
      res.data.Ret === 200 ? message.success('修改成功') : message.info(res.data.Msg)
      login2p.getUserDetail()
      setPhoneArea(86)
      setMobile(undefined)
      handleToClose()
    }
  })

  const handleToClose = () => {
    setPhoneArea(86)
    setMobile(undefined)
    onCloseModel()
  }
  const handleOnOk = () => {
    if (!mobile) return message.error('外呼号码不能为空')
    run(phoneArea.toString(), mobile || '')
  }
  const handleChangeMobile = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMobile(e.target.value.replace(/\s/g, ''))
  }
  return (
    <Modal
      open={visible}
      title="设置外呼号码"
      onOk={handleOnOk}
      onCancel={handleToClose}
      destroyOnClose={true}
      maskClosable={false}
      centered
    >
      <div className="padding-l-md padding-r-md">
        <label className={`com-fw-bold ${styles['mb12']}`}>当前号码</label>
        <span className="g-block m-b-lg">{phone}</span>
        <label className={`com-fw-bold ${styles['mb12']}`}>
          <span className={styles['red-xin']}>*</span>
          设置外呼号码
        </label>
        <Input.Group>
          <Row gutter={24}>
            <Col>
              <Select
                defaultValue={phoneArea}
                onChange={value => {
                  setPhoneArea(value)
                }}
              >
                {phoneAreaList.map(item => (
                  <Option value={item.id} key={item.id}>
                    {item.optionName}
                  </Option>
                ))}
              </Select>
            </Col>
            <Col className={styles['phone-input']}>
              <Input placeholder="请输入外呼号码" value={mobile} onChange={handleChangeMobile} />
            </Col>
          </Row>
        </Input.Group>
        <span className={`${styles['sm-gray']} g-block com-fz12 m-t-xs`}>
          注：座机号请填写区号，分机号用“-”分割，例：0398948903-232
        </span>
      </div>
    </Modal>
  )
}

export default ApplyPhoneNumber
