import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const AccountHolderSearchRequestPage = () => {
    const { navigate } = useNavigate();


    useSetHeaderTitle('계좌성명조회_신청');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderSearch.list);
    });

    const [formData, setFormData] = useState({
        mid: 'nictest001m',
        bank: '',
        accountNum: ''
    })

    const handleInputChange = (field: string, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
    };

    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderSearch.list);
    });

    const onClickToRequest = () => {
        navigate(PATHS.additionalService.accountHolderSearch.list)
    };

    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="option-list">
                            <div className="billing-form gap-16">
                                <div className="billing-row">
                                    <div className="billing-label">가맹점</div>
                                    <div className="billing-field">
                                        <select
                                            className="wid-100"
                                            value={formData.mid}
                                            onChange={(e) => handleInputChange('mid', e.target.value)}
                                        >
                                            <option>nictest001m</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">은행</div>
                                    <div className="billing-field">
                                        <select
                                            className="wid-100"
                                            value={formData.bank}
                                            onChange={(e) => handleInputChange('bank', e.target.value)}
                                        >
                                            <option>우리은행</option>
                                            <option>카카오뱅크</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">계좌번호</div>
                                    <div className="billing-field">
                                        <input
                                            type="number"
                                            value="10002464******"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={() => onClickToRequest() }
                            >신청</button>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}