'use client'

import '@/styles/style.scss'
import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'

export default function LoginPage(){
    const [passwordVisible, setPasswordVisible] = useState(false);
    const [passwordReset, setPasswordReset] = useState(1);

    // focus state
    const [idFocus, setIdFocus] = useState(false);
    const [secFocus, setSecFocus] = useState(false);
    return(
        <div className="login-wrap">
            <div className="login-inner">
                <Link href={'/login'} className="login-logo">
                    <Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} />
                </Link>
                {passwordReset === 1 && (
                    <>
                        <div className="login-input-frame">
                            <div className="login-frame-tit ">
                                <span>HANASYS DESIGN</span>
                                太陽光発電システム図面管理サイト
                            </div>
                            <div className="login-input-wrap">
                                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
                                    <input 
                                        type="text" 
                                        className='login-input' 
                                        placeholder='IDを入力してください' 
                                        onFocus={() => setIdFocus(true)}
                                        onBlur={() => setIdFocus(false)}
                                    />
                                    <button className='id-delete'></button>
                                </div>
                                <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
                                    <input 
                                        type="password" 
                                        className='login-input' 
                                        onFocus={() => setSecFocus(true)}
                                        onBlur={() => setSecFocus(false)}
                                    />
                                    <button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
                                </div>
                                <div className="d-check-box login">
                                    <input type="checkbox" id="ch01" />
                                    <label htmlFor="ch01">ID Save</label>
                                </div>
                                <div className='login-btn-box'>
                                    <button className='login-btn'>Login</button>
                                </div>
                                <div className="reset-password">
                                    <button onClick={() => setPasswordReset(2)}>パスワードの初期化</button>
                                </div>
                            </div>
                        </div>
                        <div className="login-guide-wrap">
                            <span>※</span>当サイトをご利用の際は、事前申請が必要です。<br/>
                            IDがない方は <Link href={'#'}>ID申請 クリックしてください。</Link>
                        </div>
                    </>
                )}
                {passwordReset === 2 && (
                    <>
                        <div className="login-input-frame">
                            <div className="login-frame-tit pw-reset">
                                <span>パスワードの初期化</span>
                                パスワードを初期化するIDとEメールアドレスを入力してください。
                            </div>
                            <div className="login-input-wrap">
                                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
                                    <input 
                                        type="text" 
                                        className='login-input' 
                                        placeholder={'IDを入力してください'}
                                        onFocus={() => setIdFocus(true)}
                                        onBlur={() => setIdFocus(false)}
                                    />
                                    <button className='id-delete'></button>
                                </div>
                                <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
                                    <input 
                                        type="email" 
                                        className='login-input' 
                                        placeholder={'メールを入力してください'}
                                        onFocus={() => setSecFocus(true)}
                                        onBlur={() => setSecFocus(false)}
                                    />
                                    <button className='id-delete'></button>
                                </div>
                                <div className='pwreset-btn-box'>
                                    <button className='login-btn light mr5' onClick={() => setPasswordReset(1)}>前の画面へ</button>
                                    <button className='login-btn'>パスワードの初期化</button>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </div>
            <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
        </div>
    )
}