'use client'

import { useRouter } from 'next/navigation'
import { usePopupController } from '@/store/popupController'
import { useSessionStore } from '@/store/session'
import Image from 'next/image'

export default function MemberInformationPopup() {
  const popupController = usePopupController()
  const { session } = useSessionStore()
  const router = useRouter()

  const handlePwReset = () => {
    router.push('/pw-reset')
    popupController.setMemberInfomationPopup(false)
  }

  return (
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
                  <Image src="/assets/images/layout/modal_header_icon.svg" width={18} height={20} alt="" />
                </div>
                <div className="modal-name">会員情報</div>
              </div>
              <button className="modal-close" onClick={() => popupController.setMemberInfomationPopup(false)}></button>
            </div>
          </div>
          <div className="modal-body">
            <div className="member-infor-form-wrap">
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">名前</div>
                <input type="text" className="input-frame" defaultValue={session.userNm ?? ''} disabled />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">ユーザーID </div>
                <input type="text" className="input-frame" defaultValue={session.userId ?? ''} disabled />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">メールアドレス</div>
                <input type="text" className="input-frame" defaultValue={session.email ?? ''} disabled />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">電話番号</div>
                <input type="text" className="input-frame" defaultValue={session.telNo ?? ''} disabled />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">販売店名</div>
                <input type="text" className="input-frame" defaultValue={session.storeNm ?? ''} disabled />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">建設ID</div>
                <input type="text" className="input-frame" defaultValue={session.builderNo ?? ''} disabled />
              </div>
            </div>
            <button className="btn-frame n-blue icon" onClick={handlePwReset}>
              パスワードリセット<i className="btn-arr"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}