import React, { useState } from 'react'
import useRequest from '@ahooksjs/use-request'
import { Input, Button, Form, message, Modal } from 'antd'

import styles from 'styles/NewPage.module.scss'
import { SafetyCertificateOutlined } from '@ant-design/icons'
import { ReactComponent as LoginPassword } from 'assets/login_passwode.svg'
import { Login2pService } from 'Login2p/Login2p.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import md5 from 'js-md5'
interface ISetUpPasswordProps {
  visible: boolean
  onCancelPassword: () => void
}

/**
 * 编辑专栏信息
 */
const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
  const login2p = useLogin2p()
  const { visible, onCancelPassword } = props
  const [form] = Form.useForm()

  // 点击了登录
  const handleLoginegByCode = async (value: any) => {
    // 至少 6 位字符，包含字母和数字
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/

    if (passwordRegex.test(value.new_password)) {
      const res = await Login2pService.postUpdatePassword(md5(value.old_password), md5(value.new_password))
      if (res.data.Ret === 200) {
        message.success('操作成功')
        login2p.getUserDetail()
        closeModalHandler()
      } else {
        message.error(res.data.Msg)
      }
    } else {
      message.error('请设置6位以上数字字母组合')
      return
    }
  }

  // 关闭弹框事件
  const closeModalHandler = () => {
    onCancelPassword()
  }
  return (
    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={800}>
      <div className={`${styles['login-content-bg-img']} ${styles['login-content-box-set-up']} `}>
        <div className="password-dlg-title">修改密码</div>
        <div className={styles['login-columncenter-content']}>
          <Form form={form} onFinish={handleLoginegByCode}>
            <Form.Item style={{ marginBottom: '-19px' }}>
              <Form.Item>
                <div className={styles['input-content']}>
                  <Form.Item
                    name={'old_password'}
                    style={{ width: '100%', display: 'inline-block' }}
                    rules={[{ required: true, message: 'Please input Password!' }]}
                  >
                    <Input.Password
                      style={{ height: 60 }}
                      prefix={<LoginPassword style={{ width: 20 }} />}
                      placeholder=" 请输入原密码（6位以上数字字母组合）"
                    />
                  </Form.Item>
                </div>
              </Form.Item>
            </Form.Item>
            <Form.Item style={{ marginBottom: '-19px' }}>
              <Form.Item>
                <div className={styles['input-content']}>
                  <Form.Item
                    name={'new_password'}
                    style={{ width: '100%', display: 'inline-block' }}
                    rules={[{ required: true, message: 'Please input Password!' }]}
                  >
                    <Input.Password
                      style={{ height: 60 }}
                      prefix={<LoginPassword style={{ width: 20 }} />}
                      placeholder=" 请输入新密码（6位以上数字字母组合）"
                    />
                  </Form.Item>
                </div>
              </Form.Item>
            </Form.Item>
            <Form.Item>
              <div className="password-btn-box">
                <Button
                  onClick={closeModalHandler}
                  htmlType="button"
                  className="password-btn"
                  style={{ color: '#faa12f' }}
                >
                  取消
                </Button>
                <Button type="primary" htmlType="submit" className="password-btn">
                  确定
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </Modal>
  )
}

export default SetUpPassword
