/**
 * empty comment line Ivan Marshalkin
 *
 * @author: Ivan Marshalkin
 * @date: 2019-04-19
 */

import * as React from 'react';
import {Field, IFieldProps} from './Field';
import * as styles from './field.m.css';
import {InputProps, Input} from '../..';

export type IFieldInputProps = IFieldProps & {
    name?: string;
    type: 'text' | 'number' | 'password';
    disabled: boolean;
    readOnly: boolean;
    autoComplete?: string;
    onChange: (name: string, value: string) => void;
    onEnter?: () => void;
    defaultValue?: string | number;
    error?: string | string[] | null;
    placeholder?: string;
    items?: any[];
    suffix?: any;
    allowClear?: boolean;
    // inputClassName?: string;
    // className?: string;
    // style?: string;
}

const defaultProps = {
    type: 'text' as 'text' | 'number' | 'password',
    disabled: false as boolean,
    readOnly: false as boolean
};

const InputByType = (props: any) => {
    const {label, sublabel, inputWidth, labelWidth, ...inputProps} = props;

    if (props.type === 'password') {
        return (
            <Input.Password {...inputProps}/>
        );
    } else {
        return (
            <Input {...inputProps} />
        );
    }
};

export class FieldInput extends React.PureComponent<IFieldInputProps> {

    static defaultProps = defaultProps;

    get inputChildren () {

        if (this.props.items) {
            return (
                <div className={styles.itemsContainer}>

                    {this.props.items.map((item) => {
                        return (
                            <div key={item.name} style={{width: `${item.inputWidth}%`}} className={styles.fieldInputContainer}>
                                <InputByType {...this.inputProps(item)} errorMessage={item.error}/>
                            </div>
                        );
                    })}
                </div>
            );
        }

        return (
            <InputByType {...this.inputProps(this.props)} />
        );
    }

    inputProps = ({
                      name,
                      type,
                      defaultValue,
                      placeholder,
                      autoComplete,
                      disabled,
                      readOnly,
                      onEnter,
                      suffix,
                      error,
                        allowClear
                  }: IFieldInputProps) => {
        let props: InputProps = {
            name,
            type,
            placeholder,
            autoComplete,
            value: defaultValue,
            isDisabled: disabled,
            readOnly,
            allowClear,
            onChange: this.onChange,
            onKeyDown: (onEnter !== undefined) ? this.onKeyDown : undefined,
            suffix
        };

        if (error) {
            props.hasError = true;
        }

        return props;
    }

    onChange = ({target}: { target: any }) => {
        this.props.onChange(target.name, target.value);
    }

    onKeyDown = (e: any) => {
        if (e.key === 'Enter' && this.props.onEnter) {
            this.props.onEnter();
        }
    }

    override render () {
        return (
            <Field
                {...this.props}
            >
                {this.inputChildren}
            </Field>
        );
    }
}