import React from 'react';
import { JDmodal, IUseModal, JDtypho, JDbutton, InputText, useInput, autoComma } from '@janda-com/front';
import { JDmodalConfigProps } from '@janda-com/front/build/components/modal/Modal';
import { lang as LANG } from '../../lang/langFn';
import { ISmsConfig } from '../../app';
import { getPoint_MyManager_data_point } from '../../types/api';

export type TOnClickCharge = (amt: number) => void;


export interface IWrapChain extends JDmodalConfigProps {
    modalHook: IUseModal;
    onClickCharge: TOnClickCharge;
}

interface IProp extends IWrapChain {
    config: ISmsConfig;
    pointData: getPoint_MyManager_data_point;
}

export const ChargeModal: React.FC<IProp> = ({ pointData, onClickCharge, modalHook, ...prop }) => {

    const amtHook = useInput(0);

    const foot = (
        <JDbutton thema="primary" mode="flat" onClick={() => { onClickCharge(amtHook.value) }} label={LANG("charge")} />
    )

    return <JDmodal foot={foot} head={{
        title: LANG("charge_modal_title")
    }} {...modalHook} {...prop}>
        <JDtypho mb="normal" size="h6">
            {LANG("current_point_is")(autoComma(pointData.remains))}
        </JDtypho>
        <div>
            <InputText comma Size="big" label={LANG("charge_amt")} {...amtHook} />
        </div>
    </JDmodal>;
};

export default ChargeModal;
