import * as React from 'react';
import {Button, Input, SIZE} from './../../index';

import {withInfo} from '@storybook/addon-info';
import {storyLayout} from '../../index.stories';
import {boolean, select, text, number, withKnobs}  from '@storybook/addon-knobs';
import {iconMap, sizeMap} from '../../utils/storybookEnums';
import {InputColorPicker} from './InputColorPicker';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'Input',
    decorators: [withInfo, storyLayout, withKnobs]
};

class SimpleNewInput extends React.Component<any> {
    override render () {
        const inputRef = React.createRef<HTMLInputElement>();

        return (
            <>
                <Input
                    prefix={select('prefix', iconMap(false), 'puzzle')}
                    suffix={select('suffix', iconMap(false), 'search')}
                    forwardRef={inputRef}
                    size={select('size', sizeMap(true), SIZE.MIDDLE)}
                    readOnly={boolean('readOnly', false)}
                    isDisabled={boolean('isDisabled', false)}
                    allowClear={boolean('allowClear', false)}
                    hasError={boolean('hasError', false)}
                    errorMessage={text('errorMessage', 'Simple Error')}
                    autoFocus={boolean('autoFocus', false)}
                />
                <Button size={select('size', sizeMap(true), SIZE.MIDDLE)}>Button</Button>
            </>
        );
    }
}

export const simple = () => {
    return (
        <SimpleNewInput/>
    );
};

export const password = () => {
    return (
        <Input.Password/>
    );
};

export const mask = () => {
    const [value, setValue] = React.useState('');

    return (
        <Input.Mask
            title={'hello'}
            mask={'99:*'}
            value={value}
            onChange={(e) => setValue(e.currentTarget.value)}
            // maskPlaceholder={'0'}
        />
    );
};

export const time = () => {
    return (
        <Input.Time errorMessage={'not a time'}/>
    );
};

export const Number = () => {
    const [value, setValue] = React.useState<number | undefined | string>(0);

    return (
        <div>
            <Input.Number
                step={number('step', 10)}
                max={number('max', 10000)}
                min={number('min', -10000)}
                defaultValue={100}
                value={value}

                isInteger={boolean('isInteger', false)}
                isOnlyNegative={boolean('isOnlyNegative', false)}
                isOnlyPositive={boolean('isOnlyPositive', false)}

                precision={select('precision', [0, 1, 2, 3, 4, 5], 0)}
                decimalSeparator={select('decimalSeparator', {
                    'default': undefined,
                    '.': '.',
                    ',': ','
                }, undefined)}
                formatter={(value) => {
                    if (value) {
                        return value.toString() + '$';
                    } else {
                        return '';
                    }
                }}
                parser={(value) => {
                    if (value) {
                        if (value.length >= 2 && value.indexOf('$') === -1) {
                            value = value.slice(0, value.length - 1);
                        }

                        return value.replace(/\$/g, '');
                    } else {
                        return '';
                    }
                }}
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                readOnly={boolean('readOnly', false)}
                isDisabled={boolean('isDisabled', false)}
                hasError={boolean('hasError', false)}
                errorMessage={text('errorMessage', 'Simple Error')}
                size={select('size', sizeMap(true), SIZE.MIDDLE)}
            />
        </div>
    );
};

export const InputColor = () => {
    const [color, setColor] = React.useState<string>('#b52');

    return (
        <div style={{width: '190px'}}>
            <p>Selected color: {color}</p>
            <InputColorPicker
                color={color}
                onChange={setColor}
                placeholder={'Select color...'}
                isReadOnly={boolean('isReadOnly', false)}
                isDisabled={boolean('isDisabled', false)}
                errorMessage={text('errorMessage', '')}
                allowClear={boolean('allowClear', false)}/>
        </div>
    );
};