// node modules
import React, { useState } from "react";
import { Meta, Story } from "@storybook/react";

// local components
import { Input, InputProps } from "../components/input";
import { ValidatedInput, ValidatedInputProps } from "../components/validated_input";
import { Tab } from "../components/tab";
import { Typography } from "../components/typography";

export default {
    title: 'Example/Inputs',
} as Meta;

const InputTpl: Story<InputProps> = (args) => {
    const [value, setValue] = useState('');
    const handleChange = ({ target: { value } }: any) => {
        setValue(value);
    }

    return <Input onChange={handleChange} value={value} {...args} />;
}

export const input = InputTpl.bind({});

input.args = {
    label: 'Input label',
    disabled: false,
    type: 'text',
    error: false,
    closeIcon: true,
    adornmentStart: '',
    adornmentEnd: 'km',
    autoFocus: true
}

const ValidatedInputTpl: Story<ValidatedInputProps> = (args) => {
    const tabs = ['Min - 5 symbols', 'Max - 10 symbols'];
    const [activeTab, setActiveTab] = useState(0);
    const [value, setValue] = useState('sometimessssssss');
    const handleChangeInput = (e: any) => {
        setValue(e.target.value);
    }
    const onChange = (arg: number) => {
        setActiveTab(arg)
    }

    const tabsQuery = {
        0: {
            minLength: {
                value: 5,
                errorMessage: 'Should be more then 5 symbols'
            }
        },
        1: {
            maxLength: {
                value: 10,
                errorMessage: 'Should be less then 10 symbols'
            }
        }
    }

    return (
        <div>
            <ValidatedInput
                label="Max length 10 symbols"
                validationQuery={{
                    maxLength: {
                        value: 10,
                        errorMessage: 'Max length 10 symbols'
                    }
                }}
                {...args}
            />
            <ValidatedInput
                label="Min length 5 symbols"
                validationQuery={{
                    minLength: {
                        value: 5,
                        errorMessage: 'Min length 5 symbols'
                    }
                }}
                {...args}
            />
            <ValidatedInput
                label="Only numbers"
                validationQuery={{
                    type: {
                        value: 'number',
                    }
                }}
                {...args}
            />
            <Typography variant="h2">
                Combined query:
            </Typography>
            <Typography variant="body1">
                The order of error messages depends on query params order. <br/>
                For this example of props: <br/>
                <div style={{ color: "green" }}>
                    {`{
                        type: {
                            value: 'number',
                            moreThen: {
                                value: 10,
                                errorMessage: 'Number should be more then 10'
                            },
                            lessThen: {
                                value: 160,
                                errorMessage: 'Number should be less then 160'
                            },
                            equal: {
                                value: 50,
                                errorMessage: 'Number should be equal 50'
                            }
                        }
                    }`}.
                </div>
                In case when we will have 3 errors at the same time - first one will be showed the error message from first prop in order -
                'moreThen' and after entering correct number, will be showed the error message from second prop in order - 'lessThen' and then 3-rd one.
            </Typography>
            <ValidatedInput
                label="Combined numbers query"
                validationQuery={{
                    type: {
                        value: 'number',
                        moreThen: {
                            value: 10,
                            errorMessage: 'Number should be more then 10'
                        },
                        lessThen: {
                            value: 160,
                            errorMessage: 'Number should be less then 160'
                        },
                        equal: {
                            value: 50,
                            errorMessage: 'Number should be equal 50'
                        }
                    }
                }}
                {...args}
            />
            <ValidatedInput
                label="Email"
                validationQuery={{
                    type: {
                        value: 'email',
                        errorMessage: 'Enter correct email'
                    }
                }}
                {...args}
            />
            <Typography variant="h2">
                Combined query:
            </Typography>
            <Typography variant="body1">
                The order of error messages depends on query params order. <br/>
                For this example of props: <br/>
                <div style={{ color: "green" }}>
                    {`{
                        minLength: {
                          value: 7,
                          errorMessage: 'Min length 7 symbols'
                        },
                        type: {
                            value: 'email',
                            errorMessage: 'Enter correct email'
                        }
                    }`}.
                </div>
                In case when we will have both errors - first one will be showed the error message from first prop in order -
                'minLength' and after entering correct length, will be showed the error message from second prop in order - 'type'.
            </Typography>
            <br/>
            <ValidatedInput
                label="Combined query"
                validationQuery={{
                    minLength: {
                      value: 7,
                      errorMessage: 'Min length 7 symbols'
                    },
                    type: {
                        value: 'email',
                        errorMessage: 'Enter correct email'
                    }
                }}
                {...args}
            />
            <Tab
                list={[]}
                tabs={tabs}
                activeTab={activeTab}
                onChange={onChange}
            />
            <br/>
            <ValidatedInput
                toggleValidationListener={tabs[activeTab]}
                onChange={handleChangeInput}
                value={value}
                label="Hello validation"
                validationQuery={{
                    // @ts-ignore
                    ...tabsQuery[activeTab]
                }}
                adornmentEnd="tabs"
            />
        </div>
    )
};

export const validated_input = ValidatedInputTpl.bind({});

validated_input.args = { errorDelay: false }
