import * as React from 'react';
import ReactInputMask from 'react-input-mask';
import {Props} from './Input.types';
import {Input} from './Input';

export type INewInputMaskProps = Props & {
    mask: string | Array<(string | RegExp)>;
    maskPlaceholder?: null | string;
}

export const formatChars = {
    9: '[0-9]',
    L: '[A-ZА-Я]',
    l: '[a-zа-я]',
    A: '[A-Za-z0-9А-Яа-я]'
};

export class InputMask extends React.Component<INewInputMaskProps, any> {
    override render () {
        const {
            mask,
            value,
            onChange,
            maskPlaceholder,
            onBlur,
            readOnly,
            onFocus,
            onMouseDown,
            isDisabled,
            ...props
        } = this.props;

        return (
            <ReactInputMask
                mask={mask}
                value={value}
                onChange={onChange}
                maskChar={maskPlaceholder}
                formatChars={formatChars}
                readOnly={readOnly}
                onBlur={onBlur}
                disabled={isDisabled}
                onFocus={onFocus}
                onMouseDown={onMouseDown}
            >
                {(inputProps: any) => {
                    return (
                        <Input
                            {...props}
                            autoComplete={this.props.autoComplete ? this.props.autoComplete : 'off'}
                            {...inputProps}
                            readOnly={readOnly}
                            disabled={isDisabled}
                        />
                    );
                }}
            </ReactInputMask>
        );
    }
}