/**
 * Counter (round button with number)
 *
 * @author Sergey Shishigin
 * @date 2021-08-31
 */
import * as React from 'react';
import * as styles from './counter.m.scss';
import {joinClassNames} from '../../utils/joinClassNames';
import {INTENT, SIZE} from '../../constants';
import {getSizeThemeKey} from '../../utils/getSizeThemeKey';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';
import {IntentTypes} from '../../type/IntentTypes';

interface IProps {
    disabled?: boolean;
    size?: SIZE;
    intent?: INTENT;
}

export type SizeClassNames = 'counterSizeXs' | 'counterSizeS' | 'counterSizeM' | 'counterSizeL' | 'counterSizeXl';

export class Counter extends React.PureComponent<IProps> {
    override render () {
        const {
            disabled = false,
            size = SIZE.MIDDLE,
            intent = INTENT.DEFAULT,
            children
        } = this.props;

        const sizeThemeKey = getSizeThemeKey<SizeClassNames>('counter', size);
        const intentThemeKey = getIntentThemeKey<IntentTypes>('', intent);

        const counterStyles = joinClassNames(
            styles.counter,
            styles[sizeThemeKey],
            styles[intentThemeKey],
            [styles.disabled, disabled]
        );

        return (
            <div className={counterStyles}>{children}</div>
        );
    }
}