import React from 'react';
import { withKnobs } from '@storybook/addon-knobs';
import { DummyMoudle } from '../../app';
import { JDcontainer, Toast, useModal, JDbutton, s4 } from '@janda-com/front';
import { IModalSMSinfo } from './declartion';
import "../../scss/app.scss";

const { SendModal } = DummyMoudle;

export const standard = () => {
    const modalHook = useModal<IModalSMSinfo>();
    return (
        <JDcontainer verticalPadding>
            <h6>WithIds 를 사용한경우 직접 SMS를 보내지 않습니다 CallBack으로 명시 해주세요.</h6>
            <JDbutton onClick={() => {
                modalHook.openModal({
                    mode: "withNums",
                    receivers: ["01052374492"]
                })
            }} label="번호로" />
            <JDbutton onClick={() => {
                modalHook.openModal({
                    mode: "withIds",
                    targets: [{
                        id: s4(),
                        info: '(2020/05/08)',
                        label: '김민재'
                    },
                    {
                        id: s4(),
                        info: '(2020/06/08)',
                        label: '김민재2'
                    },
                    {
                        id: s4(),
                        info: '(2020/07/08)',
                        label: '김민재3'
                    }]
                })
            }} label="아이디로" />
            <SendModal modalHook={modalHook} />
            <Toast />
        </JDcontainer>
    );
};


export default {
    title: 'SendSMs',
    component: standard,
    decorators: [withKnobs]
};

standard.story = {
    name: 'SendModal'
};
