/**
 * Component for render label/value pairs.
 *
 * @author Fedorov Platon
 * @date 2021-06-10
 */

import * as React from 'react';
import * as styles from './labelValueList.m.scss';
import {LabelValue} from '../label_value/LabelValue';
import {joinClassNames} from '../../utils/joinClassNames';

export interface ILabelValue {
    label: React.ReactNode;
    value: React.ReactNode;
    labelCanCollapsed?: boolean;
    valueCanCollapsed?: boolean;
}

interface ILabelValueListProps {
    data: ILabelValue[];
    hasColon?: boolean;
    type?: 'value' | 'info' | 'primary';
    canWrap?: boolean;
    align?: LabelValueListAlign;
    isValueItalic?: boolean;
    labelWidth?: number;
    isCenterPosition?: boolean;
}


type LabelValueListAlign = 'left' | 'center' | 'sides' | 'right' | 'column';
type DefaultPropsKeys = 'hasColon' | 'type' | 'canWrap' | 'align' | 'isValueItalic' | 'labelWidth';

type DefaultProps = Required<Pick<ILabelValueListProps, DefaultPropsKeys>>

export class LabelValueList extends React.PureComponent<ILabelValueListProps> {
    static defaultProps: DefaultProps = {
        hasColon: true,
        type: 'info',
        canWrap: true,
        align: 'sides',
        isValueItalic: false,
        labelWidth: 40
    }

    override render () {
        const container = joinClassNames(styles.container,
            [styles.canWrap, this.props.canWrap === true],
            [styles.alignLeft, this.props.align === 'left'],
            [styles.alignRight, this.props.align === 'right'],
            [styles.alignCenter, this.props.align === 'center'],
            [styles.alignSides, this.props.align === 'sides'],
            [styles.alignColumn, this.props.align === 'column']
        );

        const itemProps = {
            hasColon: this.props.hasColon,
            type: this.props.type,
            isValueItalic: this.props.isValueItalic,
            labelWidth: this.props.align === 'column' ? this.props.labelWidth : undefined,
            labelAlign: this.props.align === 'column' ? 'right' as const : 'left' as const,
            isCenterPosition: this.props.isCenterPosition
        };

        return (
            <div className={styles.wrapper}>
                <div className={container}>
                    {
                        this.props.data.map((labelValue, index) => {
                            return (
                                <LabelValue
                                    key={index}
                                    {...itemProps}
                                    label={labelValue.label}
                                    value={labelValue.value}
                                    labelCanCollapsed={labelValue.labelCanCollapsed !== false}
                                    valueCanCollapsed={labelValue.valueCanCollapsed !== false}
                                />
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}