/**
 * Component for render bold label and cursive value
 *
 * @author Brauer Ilya
 * @date 2021-01-19
 */

import * as React from 'react';
import * as styles from './labelValue.m.scss';
import {joinClassNames} from '../../utils/joinClassNames';
import {Tooltip} from '../../component';
import {PLACEMENT} from '../../constants';

export interface ILabelValueProps {
    label: React.ReactNode;
    value: React.ReactNode;
    labelTooltip?: string;
    valueTooltip?: string;
    labelCanCollapsed?: boolean;
    valueCanCollapsed?: boolean;
    hasAsterisk?: boolean;
    hasColon?: boolean;
    type?: 'value' | 'info' | 'primary';
    isValueItalic?: boolean;
    isSpaceBetween?: boolean;
    isCenterPosition?: boolean;
    labelWidth?: number;
    labelAlign?: 'left' | 'center' | 'right';
    labelWeight?: number;
    isWhiteColor?: boolean;
    isWrap?: boolean;
    verticalAlign?: 'top' | 'center';
}

type DefaultPropsKeys =
    'hasAsterisk' |
    'hasColon' |
    'type' |
    'labelCanCollapsed' |
    'valueCanCollapsed' |
    'isValueItalic' |
    'isSpaceBetween' |
    'isCenterPosition' |
    'labelAlign' |
    'labelWeight' |
    'isWhiteColor' |
    'isWrap' |
    'verticalAlign';

type DefaultProps = Required<Pick<ILabelValueProps, DefaultPropsKeys>>;

export class LabelValue extends React.PureComponent<ILabelValueProps> {
    static defaultProps: DefaultProps = {
        hasAsterisk: false,
        hasColon: true,
        type: 'info',
        valueCanCollapsed: true,
        labelCanCollapsed: true,
        isValueItalic: false,
        isSpaceBetween: false,
        isCenterPosition: false,
        labelAlign: 'left',
        labelWeight: 600,
        isWhiteColor: false,
        isWrap: false,
        verticalAlign: 'center'
    };

    renderLabel = () => {
        const labelContainer = joinClassNames(
            styles.labelContainer,
            [styles.canCollapsed, this.props.labelCanCollapsed === true],
            [styles.alignLeft, this.props.labelAlign === 'left'],
            [styles.alignCenter, this.props.labelAlign === 'center'],
            [styles.alignRight, this.props.labelAlign === 'right'],
        );

        const {labelWidth, labelWeight} = this.props;

        let labelStyle = {};

        if (labelWidth) {
            labelStyle = Object.assign(labelStyle, {
                width: `${labelWidth}%`,
                flexShrink: 0
            });
        }

        if (labelWeight) {
            labelStyle = Object.assign(labelStyle, {
                fontWeight: labelWeight
            });
        }

        return (
            <div className={labelContainer} style={labelStyle}>
                <div className={styles.labelText}>
                    {this.props.label}
                </div>
                {this.props.hasColon && (<div>:</div>)}
                {this.props.hasAsterisk && (<div className={styles.required}>*</div>)}
            </div>
        );
    };

    override render () {
        const containerHasCollapsedChild = this.props.valueCanCollapsed === true ||
            this.props.labelCanCollapsed === true;

        const container = joinClassNames(styles.container,
            [styles.typeValue, this.props.type === 'value'],
            [styles.typeInfo, this.props.type === 'info'],
            [styles.typePrimary, this.props.type === 'primary'],
            [styles.containerHasCollapsedChild, containerHasCollapsedChild],
            [styles.spaceBetween, this.props.isSpaceBetween === true],
            [styles.center, this.props.isCenterPosition === true],
            [styles.isWhiteColor, this.props.isWhiteColor === true],
            [styles.isWrap, this.props.isWrap === true],
            [styles.verticalAlignCenter, this.props.verticalAlign === 'center'],
            [styles.verticalAlignTop, this.props.verticalAlign === 'top'],
        );

        const value = joinClassNames(styles.value,
            [styles.canCollapsed, this.props.valueCanCollapsed === true],
            [styles.isValueItalic, this.props.isValueItalic === true]
        );

        return (
            <div className={container}>
                {
                    this.props.labelCanCollapsed ? (
                        <Tooltip overlay={this.props.labelTooltip || this.props.label}>
                            {this.renderLabel()}
                        </Tooltip>
                    ) : (
                        this.renderLabel()
                    )
                }
                {
                    this.props.valueCanCollapsed ? (
                        <Tooltip overlay={this.props.valueTooltip || this.props.value} placement={PLACEMENT.TOP}>
                            <div className={value}>
                                {this.props.value}
                            </div>
                        </Tooltip>
                    ) : (
                        <div className={value}>
                            {this.props.value}
                        </div>
                    )
                }
            </div>
        );
    }
}