import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useExtensionAccountHolderSearchRequestMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-reqeust-mutation';
import { ExtensionAccountHolderSearchRequestParams } from '@/entities/additional-service/model/account-holder-search/types';
import { useStore } from '@/shared/model/store';

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

    const userMid = useStore.getState().UserStore.mid

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

    const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();

    const [formData, setFormData] = useState({
        mid: userMid,
        bankCode: '',
        accountNo: ''
    })

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

    const onClickToRequest = () => {
        const reuqestParams: ExtensionAccountHolderSearchRequestParams = {
            mid: formData.mid,
            bankCode: formData.bankCode, // 추후 진짜 은행코드 삽입 필요
            accountNo: formData.accountNo
        }

        console.log("계좌성명 조회 조회신청 요청 파라미터 : ", reuqestParams);

        accountHolderSearchRequest(reuqestParams)
        .then((response) => {
            console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
            navigate(PATHS.additionalService.accountHolderSearch.list);
        })
        .catch((error) => {
            console.error("계좌성명 조회 조회 신청 실패: ", error)
        })
    };

    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>nictest00m</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">은행</div>
                                    <div className="billing-field">
                                        <select
                                            className="wid-100"
                                            value={formData.bankCode}
                                            onChange={(e) => handleInputChange('bankCode', 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"
                                        placeholder=''
                                        value={formData.accountNo}
                                        onChange={(e) => handleInputChange('accountNo', e.target.value)}
                                        ></input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={() => onClickToRequest()}
                            >신청</button>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}