import React, { useState } 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 { useRouter } from 'next/navigation'

export default function ChangePasswordPop() {
  const globalLocaleState = useRecoilValue(globalLocaleStore)

  const { patch } = useAxios(globalLocaleState)
  const { getMessage } = useMessage()
  const [sessionState, setSessionState] = useRecoilState(sessionStore)
  const router = useRouter()
  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 !== _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'))
          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
          //메인으로 이동
          router.push('/')
        } else {
          alert(res.result.resultMsg)
        }
      } else {
        console.log('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')}
                          <span className="important">*</span>
                        </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')}
                          <span className="important">*</span>
                        </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={() => {
                  router.push('/login')
                }}
              >
                {getMessage('main.popup.login.btn2')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}