import cx from 'classnames';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import React from 'react';
import TimezonedDatetime from '../timezonedDatetime';
import type { Dayjs } from 'dayjs';
import type { FC } from 'react';
import type { Timezone } from 'src/types';

dayjs.extend(utc);
dayjs.extend(timezone);

export interface TimezoneBreakdownProps {
    className?: string;
    timezones: Timezone[];
    date: Date;
}

/**
 * Given a UTC datetime string of the format 'YYYY-MM-DDThh:mmZ' or a Date,
 * convert its timezone to each of those provided in an array of objects,
 * paired with the input timezone.
 */
export const localize = ({
    dateTime,
    timezones,
}: {
    dateTime: string | Date;
    timezones: Timezone[];
}): { dateTime: Dayjs; timezone: Timezone }[] =>
    timezones.reduce(
        (values, timezone) => [
            ...values,
            {
                dateTime: dayjs.utc(dateTime).tz(timezone.iana),
                timezone: {
                    ...timezone,
                    offset:
                        dayjs.utc(dateTime).tz(timezone.iana).utcOffset() / 60,
                },
            },
        ],
        [] as { dateTime: Dayjs; timezone: Timezone }[]
    );

const TimezoneBreakdown: FC<TimezoneBreakdownProps> = ({
    className,
    timezones,
    date,
}) => {
    const localized = localize({
        dateTime: date,
        timezones: timezones
            .slice()
            .sort(({ offset: a }, { offset: b }) => a - b),
    });
    return (
        <div className={cx('TimezoneBreakdown', className)}>
            {localized.map(({ timezone, dateTime }, index) => {
                const previous =
                    index === 0
                        ? undefined
                        : dayjs(
                              localized[index - 1].dateTime.format('YYYY-MM-DD')
                          );
                const current = dayjs(dateTime.format('YYYY-MM-DD'));
                return (
                    <div key={timezone.abbreviation}>
                        {previous && previous.isBefore(current, 'day') && (
                            <div className="dateline">
                                <div className="date">+1 Day</div>
                                <hr />
                            </div>
                        )}
                        <TimezonedDatetime timezone={timezone} date={date} />
                    </div>
                );
            })}
        </div>
    );
};

export default TimezoneBreakdown;