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 { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { number } from 'framer-motion';

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

    const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();

    useSetHeaderTitle('KEY-IN 결제');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.keyInPayment.list);
    });

    const callKeyInPaymentRequest = () => {
        let keyInApplyParams = {
            mid: 'string',
            goodsName: 'string',
            amount: 0,
            buyerName: 'string',
            email: 'string',
            phoneNumber: 'string',
            cardNo: 'string',
            cardExpirationDate: 'string',
            instmntMonth: 'string',
            moid: 'SMS',
        };
        keyInApply(keyInApplyParams).then((rs) => {
            navigate(PATHS.additionalService.keyInPayment.requestSuccess);
            console.log(rs)
        }).catch(() => {

        }).finally(() => {

        });

    };




    const onClickToRequest = () => {
        callKeyInPaymentRequest();
    };

    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">가맹점 <span>*</span></div>
                                    <div className="billing-field">
                                        <select
                                            className="wid-100"
                                        >
                                            <option>nictest00m</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">상품명 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">상품가격 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">구매자명 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">구매자 이메일 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="email"
                                            value=""
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">구매자 전화번호 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="tel"
                                            value=""
                                            placeholder=" '-' 제외하고 입력"
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">카드번호 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">유효기간(월/년)<span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                            placeholder='MM/YY'
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">할부 기간<span>*</span></div>
                                    <div className="billing-field">
                                        <select
                                            className="wid-100"
                                        >
                                            <option>일시불</option>
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">주문번호</div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value=""
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={() => onClickToRequest() }
                            >결제 신청</button>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}