import * as React from 'react';

export interface SummaryColumnProps {
    config?: any;
}

export interface SummaryColumnState {
    id?: string;
}

export class SummaryColumnComponent extends React.Component<
    SummaryColumnProps,
    SummaryColumnState
> {
    private static id_counter = 0;
    private id;

    /**
     * Generate a unique id for this component instance
     */
    private getId(): number {
        if (this.id === undefined) {
            this.id = SummaryColumnComponent.id_counter;
            SummaryColumnComponent.id_counter++;
        }
        return this.id;
    }

    constructor(props) {
        super(props);
        this.state = {
            id: 'mmui_column_summary_' + this.getId(),
        };
    }

    /**
     * Render Column Head Component
     */
    render() {
        const thSummaryClassNameArray = ['mmui-th-summary-value'],
            config = this.props.config;

        if (config.isNumeric || config.isMetric) {
            thSummaryClassNameArray.push('text-right');
        }

        if (config.hasLevels) {
            thSummaryClassNameArray.push('mmui-pl-5');
        } else {
            thSummaryClassNameArray.push('mmui-ml-2');
        }

        return (
            <th
                id={this.state.id}
                key={config.key}
                colSpan={config.colSpan}
                className={'mmui-th-summary '}
            >
                <div className={thSummaryClassNameArray.join(' ')}>
                    {config.summaryValueRender}
                </div>
            </th>
        );
    }
}