import { Story, Meta } from '@storybook/react';
import IMask from 'imask/esm/imask';
import InputMasked from './InputMasked';
import Block from '../../atoms/Block/Block';
import { IMaskInput } from 'react-imask';

export default {
    title: 'Component/Elements/InputMasked',
    component: InputMasked,
    parameters: {
        component: InputMasked,
        previewTabs: {
            canvas: {
                hidden: true,
            },
        },
        viewMode: 'docs',
    },
} as Meta;

interface ExampleProps {
    children?: React.ReactNode;
    classes: string;
}

const Template: Story<typeof IMaskInput> = (args) => <InputMasked mask=""></InputMasked>;

const Example: Story<ExampleProps> = (args) => {
    const classes = args.classes;
    return classes ? <Block className={args.classes}>{args.children}</Block> : <>{args.children}</>;
};

export const Properties = Template.bind({});
Properties.args = {};

export const Usage = Example.bind({});
Usage.args = {
    children: (
        <InputMasked
            mask={Date}
            blocks={{
                d: {
                    mask: IMask.MaskedRange,
                    from: 1,
                    to: 31,
                    maxLength: 2,
                },
                m: {
                    mask: IMask.MaskedRange,
                    from: 1,
                    to: 12,
                    maxLength: 2,
                },
                Y: {
                    mask: IMask.MaskedRange,
                    from: 1000,
                    to: 9999,
                },
            }}
            onComplete={(value) => console.log(value)}
            placeholder="dd.mm.yyyy"
            autofix={true}
        />
        // So you have to provide format and parse callbacks, and just make sure that format(parse(yourInputDateString) === yourInputDateString
    ),
};
