/**
 * 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 {Checkbox, ICheckboxProps, joinClassNames} from '../..';
import {FieldLabel} from './FieldLabel';

export type IFieldCheckboxProps = IFieldProps & {
    name?: string;
    defaultChecked?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    onChange: (name: string, value: boolean) => void;
    inputLabel?: string;
    items?: any[];
    checkboxPosition?: 'left' | 'right';
}

const defaultProps = {
    disabled: false as boolean,
    checkboxPosition: 'right'
};

export class FieldCheckbox extends React.PureComponent<IFieldCheckboxProps> {

    static defaultProps = defaultProps;

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

                    {this.props.items.map((item) => {
                        return (
                            <div key={item.name} className={styles.fieldInputContainer}>
                                <Checkbox {...this.inputProps(item)}>
                                    {item.inputLabel}
                                </Checkbox>
                            </div>
                        );
                    })}
                </div>
            );
        }

        return (
            <div className={styles.checkboxInputPadding}>
                <Checkbox {...this.inputProps(this.props)}>
                    {this.props.inputLabel}
                </Checkbox>
            </div>
        );
    }

    inputProps = ({
                      name,
                      defaultChecked,
                      disabled,
                      readOnly
    }: IFieldCheckboxProps) => {
        let props: ICheckboxProps = {
            name,
            checked: (defaultChecked === undefined) ? false : defaultChecked,
            onChange: this.onChange,
            disabled,
            readOnly
        };

        return props;
    }

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

    override render () {
        const props = this.props;
        const {label, sublabel, error, checkboxPosition, isRequired, isWide} = props;

        if (checkboxPosition === 'right') {
            return (
                <Field
                    {...this.props}
                >
                    {this.checkboxChildren}
                </Field>
            );
        } else {
            const inputClass = joinClassNames(
                styles.fieldInputContainer,
                styles.checkboxInputWidth
            );

            const labelClass = joinClassNames(
                styles.fieldLabelContainer,
                styles.checkboxLabelWidth
            );

            const fieldStyles = joinClassNames(
                styles.field,
                styles.columnsMode,
                [styles.wide, isWide === true]
            );

            return (
                <div
                    className={fieldStyles}
                    data-qaid={props['data-qaid']}
                >
                    <div className={inputClass}>
                        {this.checkboxChildren}
                    </div>
                    <div className={labelClass}>
                        <FieldLabel
                            label={label}
                            sublabel={sublabel}
                            isRequired={isRequired}
                        />

                        {error && (
                            <div className={styles.fieldError}>
                                {error}
                            </div>
                        )}
                    </div>
                </div>
            );
        }
    }
}