toggle-corp/react-store

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.scss';

const propTypes = {
    className: PropTypes.string,
    title: PropTypes.string.isRequired,
    subTitle: PropTypes.string,
    minValue: PropTypes.number.isRequired,
    maxValue: PropTypes.number.isRequired,
    minLabel: PropTypes.node,
    maxLabel: PropTypes.node,
    minColor: PropTypes.string.isRequired,
    maxColor: PropTypes.string.isRequired,
};

const defaultProps = {
    className: '',
    subTitle: '',
    minLabel: '',
    maxLabel: '',
};

export default class ScaleLegend extends React.PureComponent {
    static propTypes = propTypes;

    static defaultProps = defaultProps;

    getClassName = () => {
        const { className } = this.props;
        const classNames = [
            className,
            'scale-legend',
            styles.scaleLegend,
        ];

        return classNames.join(' ');
    }

    getScaleStyle = () => {
        const {
            minColor,
            maxColor,
        } = this.props;

        return {
            background: `linear-gradient(to right, ${minColor}, ${maxColor})`,
        };
    }

    render() {
        const className = this.getClassName();
        const {
            title,
            subTitle,
            minValue,
            maxValue,
            minLabel,
            maxLabel,
        } = this.props;

        return (
            <div className={className}>
                <h5 className={styles.header}>
                    { title }
                </h5>
                <div
                    className={styles.scale}
                    style={this.getScaleStyle()}
                />
                <div className={styles.scaleValues}>
                    <span className={styles.value}>
                        { minLabel || minValue }
                    </span>
                    <span className={styles.title}>
                        { subTitle }
                    </span>
                    <span className={styles.value}>
                        { maxLabel || maxValue }
                    </span>
                </div>
            </div>
        );
    }
}