import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {Button} from '../../Button';
import {Block} from '../../Block';
import {isActiveRange, parsePreDefinedRangeConfig} from './datePickerHelpers';

export class PreDefinedRangesBlock extends React.PureComponent<any> {
    static propTypes = {
        ranges: PropTypes.object,
        startDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.string]),
        endDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.string]),
        onPredefinedRangeButtonClick: PropTypes.func.isRequired
    };

    static defaultProps = {
        ranges: [],
        startDate: null,
        endDate: null
    };

    render() {
        const {ranges, startDate, endDate, onPredefinedRangeButtonClick} = this.props;

        if (_.isEmpty(ranges)) {
            return null;
        }

        const rangeButtons = _.map(ranges, (rangeConfig, buttonText) => {
            const range = parsePreDefinedRangeConfig(rangeConfig);

            return (
                <Button
                    key={buttonText}
                    className="range-predefined-btn"
                    block
                    active={isActiveRange({range, startDate, endDate})}
                    onClick={() =>
                        onPredefinedRangeButtonClick({
                            startDate: range.startDate,
                            endDate: range.endDate
                        })
                    }>
                    {buttonText}
                </Button>
            );
        });

        return <Block className="rc-datepicker-predefined-ranges">{rangeButtons}</Block>;
    }
}
