import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import {translate} from '../../../utils';
import {DayRangePicker} from './DateTimePicker/DayRangePicker.js';

export class DateRangePickerWithPresets extends React.PureComponent {
    static propTypes = {
        ...DayRangePicker.propTypes,
        timeZoneOffset: PropTypes.number,
        useDefaultValueFormatter: PropTypes.bool,
        todayText: PropTypes.string,
        todayDateText: PropTypes.string,
        yesterdayText: PropTypes.string,
        yesterdayDateText: PropTypes.string,
        days7Text: PropTypes.string,
        days30Text: PropTypes.string,
        days60Text: PropTypes.string,
        days90Text: PropTypes.string,
        rangeText: PropTypes.string
    };

    static defaultProps = {
        useDefaultValueFormatter: true,
        todayText: 'TRANSLATE:TODAY',
        todayDateText: 'TRANSLATE:TODAY_DATE',
        yesterdayText: 'TRANSLATE:YESTERDAY',
        yesterdayDateText: 'TRANSLATE:YESTERDAY_DATE',
        days7Text: 'TRANSLATE:DAYS7',
        days30Text: 'TRANSLATE:DAYS30',
        days60Text: 'TRANSLATE:DAYS60',
        days90Text: 'TRANSLATE:DAYS90',
        rangeText: 'TRANSLATE:RANGE',
        timeZoneOffset: 0
    };

    getCurrentDate() {
        return moment.utc().zone(this.props.timeZoneOffset);
    }

    getLocalTime() {
        return {
            NOW: this.getCurrentDate(),
            START_OF_TODAY: this.getCurrentDate(),
            START_OF_YESTERDAY: this.getCurrentDate().add(-1, 'days'),
            START_OF_7_DAYS_AGO: this.getCurrentDate().add(-6, 'days'),
            START_OF_30_DAYS_AGO: this.getCurrentDate().add(-29, 'days'),
            START_OF_60_DAYS_AGO: this.getCurrentDate().add(-59, 'days')
        };
    }

    getRanges = () => {
        const {todayText, yesterdayText, days7Text, days30Text, days60Text} = this.props;
        const {
            NOW,
            START_OF_YESTERDAY,
            START_OF_7_DAYS_AGO,
            START_OF_30_DAYS_AGO,
            START_OF_60_DAYS_AGO
        } = this.getLocalTime();

        return {
            [todayText]: {
                startDate: NOW,
                endDate: NOW
            },
            [yesterdayText]: {
                startDate: START_OF_YESTERDAY,
                endDate: START_OF_YESTERDAY
            },
            [days7Text]: {
                startDate: START_OF_7_DAYS_AGO,
                endDate: NOW
            },
            [days30Text]: {
                startDate: START_OF_30_DAYS_AGO,
                endDate: NOW
            },
            [days60Text]: {
                startDate: START_OF_60_DAYS_AGO,
                endDate: NOW
            }
        };
    };

    checkRangeDate({startDate, endDate, daysAgo, endRange}) {
        return (
            startDate
                .clone()
                .add(daysAgo, 'day')
                .isSame(endDate, 'day') && endDate.isSame(endRange, 'day')
        );
    }

    defaultValueFormatter = (startDate, endDate) => {
        const {days7Text, days30Text, days60Text, todayDateText, yesterdayDateText} = this.props;

        const currentDate = this.getCurrentDate();
        const isSelectOneDay = startDate.isSame(endDate, 'date');
        const isStartDateToday = startDate.isSame(currentDate, 'day');
        const isStartDateYesterday = startDate
            .clone()
            .add(1, 'day')
            .isSame(currentDate, 'day');

        const checkHowManyLastDaysSelected = daysAgo =>
            this.checkRangeDate({
                startDate,
                endDate,
                daysAgo,
                endRange: currentDate
            });

        const longDateFormat = moment.localeData().longDateFormat('L');
        const formattedStartDate = startDate.format(longDateFormat);
        const formattedEndDate = endDate.format(longDateFormat);
        if (isSelectOneDay) {
            if (isStartDateToday) {
                return translate(todayDateText, {date: formattedStartDate});
            }

            if (isStartDateYesterday) {
                return translate(yesterdayDateText, {date: formattedStartDate});
            }

            return startDate.format('L');
        }

        if (checkHowManyLastDaysSelected(6)) {
            return days7Text;
        }
        if (checkHowManyLastDaysSelected(29)) {
            return days30Text;
        }
        if (checkHowManyLastDaysSelected(59)) {
            return days60Text;
        }

        return `${formattedStartDate} - ${formattedEndDate}`;
    };

    getValueFormatter() {
        if (this.props.useDefaultValueFormatter) {
            return this.defaultValueFormatter;
        }

        return this.props.valueFormatter;
    }

    render() {
        const {timeZoneOffset, useDefaultValueFormatter, valueFormatter, ...props} = this.props;
        return (
            <DayRangePicker
                {...props}
                ranges={this.getRanges()}
                valueFormatter={this.getValueFormatter()}
            />
        );
    }
}
