import React from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useForm } from 'react-hook-form'
import { sessionStore } from '@/store/commonAtom'
import { useRecoilValue, useRecoilState } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { logout } from '@/lib/authActions'
export default function ChangePasswordPop(props) {
  const globalLocaleState = useRecoilValue(globalLocaleStore)

  const { patch } = useAxios(globalLocaleState)
  const { getMessage } = useMessage()
  const [sessionState, setSessionState] = useRecoilState(sessionStore)
  const formInitValue = {
    password1: '',
    password2: '',
  }
  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
    defaultValues: formInitValue,
  })

  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }

  //자리수체크
  const checkLength = (pwd1) => {
    let str = new String(pwd1)
    let _byte = 0
    if (str.length !== 0) {
      for (let i = 0; i < str.length; i++) {
        let str2 = str.charAt(i)
        if (encodeURIComponent(str2).length > 4) {
          _byte += 2
        } else {
          _byte++
        }
      }
    }
    return _byte
  }

  //공백제거
  const checkValue = (e) => {
    let spaceChk = /\s/
    if (spaceChk.exec(e.target.value)) {
      e.target.value = e.target.value.replace(/\s|/gi, '')
      return false
    }
  }

  //비밀번호 변경
  const updateProcess = async () => {
    const _password1 = form.watch('password1')
    const _password2 = form.watch('password2')

    //비밀번호 미입력시
    if (_password1.trim() === '') {
      alert(getMessage('main.popup.login.validate3'))
      return false
    }
    if (_password2.trim() === '') {
      alert(getMessage('main.popup.login.validate3'))
      return false
    }

    if (_password1 !== _password2) {
      alert(getMessage('main.popup.login.validate1'))
      return false
    }

    //패스워드 길이수 체크
    if (checkLength(_password1) > 10) {
      return alert(getMessage('main.popup.login.validate2'))
    }

    const param = {
      loginId: sessionState.userId,
      chgType: 'I',
      chgPwd: _password1,
    }

    await patch({ url: '/api/login/v1.0/user/change-password', data: param })
      .then((res) => {
        if (res?.result?.code === 200) {
          if (res?.result?.resultCode === 'S') {
            alert(getMessage('main.popup.login.success'))
            logout()
          } else {
            alert(res?.result?.resultMsg)
          }
        } else {
          logout()
          console.log('code not 200 error')
        }
      })
      .catch((error) => {
        logout()
        console.log('catch::::::::', error)
      })
  }

  return (
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h1 className="title">{getMessage('main.popup.login.popupTitle')}</h1>
          </div>
          <div className="modal-body">
            <div className="modal-body-inner">
              <div className="change-password-box">
                <div className="form-table">
                  <div className="table-item">
                    <div className="table-item-th">
                      <div className="change-password-tit">
                        <div className="tit-b">{getMessage('main.popup.login.newPassword1')}</div>
                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
                      </div>
                    </div>
                    <div className="table-item-td">
                      <div className="change-password-input">
                        <input
                          type="text"
                          className="change-password"
                          {...form.register('password1')}
                          autoComplete="off"
                          onChange={checkValue}
                          onKeyUp={checkValue}
                        />
                      </div>
                    </div>
                  </div>
                  <div className="table-item">
                    <div className="table-item-th">
                      <div className="change-password-tit">
                        <div className="tit-b">{getMessage('main.popup.login.newPassword2')}</div>
                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
                      </div>
                    </div>
                    <div className="table-item-td">
                      <div className="change-password-input">
                        <input
                          type="text"
                          className="change-password"
                          {...form.register('password2')}
                          autoComplete="off"
                          onChange={checkValue}
                          onKeyUp={checkValue}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="change-password-guide">
                <span>{getMessage('main.popup.login.guide1')}</span>
                <span>{getMessage('main.popup.login.guide2')}</span>
              </div>
            </div>
            <div className="footer-btn-wrap">
              <button type="sumbit" className="btn-origin navy mr5" onClick={updateProcess}>
                {getMessage('main.popup.login.btn1')}
              </button>
              <button
                type="button"
                className="btn-origin grey"
                onClick={() => {
                  logout()
                }}
              >
                {getMessage('main.popup.login.btn2')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}