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

import * as React from 'react';
import {FIELD_MODE, Icon, joinClassNames, PLACEMENT, POPOVER_THEME, SIZE, Tooltip} from '../..';
import {FieldLabel} from './FieldLabel';
import * as styles from './field.m.css';
import {FieldInput} from './FieldInput';
import {FieldCheckbox} from './FieldCheckbox';
import {FieldSelect} from './FieldSelect';
import {FieldTextArea} from './FieldTextArea';
import {FieldSwitch} from './FieldSwitch';
import {FieldTreeSelect} from './FieldTreeSelect';
import {FieldDatePicker} from './FieldDatePicker';
import {FieldNumber} from './FieldNumber';
import {IconIntent} from '../../../../icon';

export interface IFieldProps {
    label?: React.ReactNode;
    sublabel?: string;
    error?: string | string[] | null;
    labelWidth?: number;
    inputWidth?: number;
    isMultiLine?: boolean;
    'data-qaid'?: string;
    viewMode?: FIELD_MODE;
    isRequired?: boolean;
    prefix?: React.ReactNode;
    isWide?: boolean;
    rightExtraItems?: React.ReactNode;
}

const defaultProps = {
    labelWidth: 40,
    inputWidth: 60,
    viewMode: FIELD_MODE.COLUMNS_ALIGN_LEFT
};

export class Field extends React.PureComponent<IFieldProps> {

    static defaultProps = defaultProps;

    static Label = FieldLabel;
    static Input = FieldInput;
    static Checkbox = FieldCheckbox;
    static Select = FieldSelect;
    static Textarea = FieldTextArea;
    static Switcher = FieldSwitch;
    static TreeSelect = FieldTreeSelect;
    static DatePicker = FieldDatePicker;
    static Number = FieldNumber;

    override render () {
        const props = this.props;

        const {
            label,
            sublabel,
            error,
            labelWidth,
            inputWidth,
            isMultiLine,
            viewMode,
            isRequired,
            prefix,
            isWide,
            rightExtraItems
        } = props;

        const fieldStyles = joinClassNames(
            styles.field,
            [styles.multiLine, isMultiLine === true],
            [styles.listMode, viewMode === FIELD_MODE.LIST],
            [styles.columnsMode, viewMode !== FIELD_MODE.LIST],
            [styles.alignRight, viewMode === FIELD_MODE.COLUMNS_ALIGN_RIGHT],
            [styles.wide, isWide === true]
        );

        const labelStyle = {
            width: viewMode === FIELD_MODE.LIST ? '100%' : `${labelWidth}%`
        };

        const inputStyle = {
            width: viewMode === FIELD_MODE.LIST ? '100%' : `${inputWidth}%`
        };

        return (
            <div className={'ud-field'}>
                <div
                    className={fieldStyles}
                    data-qaid={props['data-qaid']}
                    data-component-id={'Field'}
                >
                    {prefix !== undefined && (
                        <div className={styles.labelPrefixContainer}>
                            {prefix}
                        </div>
                    )}
                    <div
                        style={labelStyle}
                        className={styles.fieldLabelContainer}
                        data-component-id={'FieldLabel'}
                    >
                        <FieldLabel
                            label={label}
                            sublabel={sublabel}
                            isRequired={isRequired}
                        />
                    </div>
                    <div
                        style={inputStyle}
                        className={styles.fieldInputContainer}
                        data-component-id={'FieldInput'}
                    >
                        {props.children}
                    </div>
                    {error && (
                        <Tooltip
                            overlay={error}
                            theme={POPOVER_THEME.LIGHT}
                            placement={PLACEMENT.BOTTOM_END}
                        >
                            <div
                                className={styles.fieldError}
                            >
                                <Icon
                                    name={'notification-circle'}
                                    intent={IconIntent.DANGER}
                                    size={SIZE.LARGE}
                                />
                            </div>
                        </Tooltip>
                    )}
                    {rightExtraItems !== undefined && (
                        <div className={styles.rightItemsContainer}>
                            <div className={styles.rightItemsInnerContainer}>
                                {rightExtraItems}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        );
    }
}