'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

import { useLocalStorage } from 'usehooks-ts'

import { axiosInstance } from '@/libs/axios'
import { useSessionStore } from '@/store/session'

export default function PwResetForm() {
  const [pwShow01, setPwShow01] = useState<boolean>(false) //비밀번호 확인 보이기 숨기기
  const [pwShow02, setPwShow02] = useState<boolean>(false) //비밀번호 재확인 보이기 숨기기

  const [pwd01, setPwd01] = useState<string>('')
  const [pwd02, setPwd02] = useState<string>('')

  const router = useRouter()

  const { session } = useSessionStore()
  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })

  const validatePwd = () => {
    if (pwd01 !== pwd02) {
      alert('비밀번호가 일치하지 않습니다.')
      return false
    }
    return true
  }

  const handleReset = async () => {
    if (validatePwd()) {
      const { data } = await axiosInstance(null).post(`/api/auth/chg-pwd`, {
        loginId: session.userId,
        email: session.email,
        pwd: value.indivisualData,
        chgPwd: pwd01,
      })

      if (data.data.result.resultCode === 'S') {
        setValue({ indivisualData: pwd01 })
      }

      window.neoAlert(data.data.result.resultMsg, () => {
        router.back()
      })
    }
  }

  return (
    <>
      <div className="border-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              新規パスワード再入力 <i className="import">*</i>
            </div>
            <div className="data-input">
              <div className="login-input pw change">
                <input
                  type={`${pwShow01 ? 'text' : 'password'}`}
                  className="login-frame"
                  placeholder="●●●●"
                  onChange={(e) => setPwd01(e.target.value)}
                />
                <button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}>
                  <i className="show-icon"></i>
                </button>
              </div>
            </div>
            <div className="data-input-guide">10文字以内</div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              新規パスワード入力 <i className="import">*</i>
            </div>
            <div className="data-input">
              <div className="login-input pw change">
                <input
                  type={`${pwShow02 ? 'text' : 'password'}`}
                  className="login-frame"
                  placeholder="●●●●"
                  onChange={(e) => setPwd02(e.target.value)}
                />
                <button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}>
                  <i className="show-icon"></i>
                </button>
              </div>
            </div>
            <div className="data-input-guide">10文字以内</div>
          </div>
        </div>
        <div className="btn-flex-wrap">
          <div className="btn-bx">
            <button className="btn-frame n-blue icon" onClick={() => router.back()}>
              戻る<i className="btn-arr"></i>
            </button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame red icon" onClick={handleReset}>
              リセットする<i className="btn-arr"></i>
            </button>
          </div>
        </div>
      </div>
    </>
  )
}