import React from 'react';
import {
    GridTable,
    type GridTableCellProps,
} from '@theorchard/suite-components';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { EMPTY_CHAR } from 'src/constants';

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

export const CLASS_NAME = 'TimedReleases';
export const INTL_PREFIX = 'contentReview.schedulingAndPricing';

export interface TimedRelease {
    name: string;
    offsetLabel: string;
    localTime: dayjs.Dayjs;
}

interface Props {
    dateTime: string | null;
}

const SUPPORTED_TIMEZONES = [
    {
        name: 'Pacific Standard Time (PST)',
        offsetLabel: 'UTC-8',
        tz: 'America/Los_Angeles',
    },
    {
        name: 'Eastern Standard Time (EST)',
        offsetLabel: 'UTC-5',
        tz: 'America/New_York',
    },
    {
        name: 'Greenwich Mean Time (GMT/UTC)',
        offsetLabel: 'UTC+0',
        tz: 'Etc/UTC',
    },
    {
        name: 'Central European Time (CET)',
        offsetLabel: 'UTC+1',
        tz: 'Europe/Berlin',
    },
    {
        name: 'India Standard Time (IST)',
        offsetLabel: 'UTC+5:30',
        tz: 'Asia/Kolkata',
    },
    {
        name: 'Australian Eastern Daylight Time (AEDT)',
        offsetLabel: 'UTC+11',
        tz: 'Australia/Sydney',
    },
];

const TimedReleaseTable = ({ dateTime }: Props) => {
    const baseTime = dayjs.utc(dateTime);
    const timezonesData = SUPPORTED_TIMEZONES.map(timezoneData => ({
        ...timezoneData,
        localTime: baseTime.tz(timezoneData.tz),
    }));

    return (
        <GridTable
            className="scheduling-and-pricing-table"
            rowKey={row => row?.name}
            data={timezonesData}
            variant="zebra"
        >
            <GridTable.Column
                name="timezone"
                title={$t(`${INTL_PREFIX}.timezone`)}
                minWidth="45rem"
                Cell={({
                    data: { name },
                }: GridTableCellProps<TimedRelease>) => <span>{name}</span>}
            />
            <GridTable.Column
                name="offset"
                title={$t(`${INTL_PREFIX}.offset`)}
                minWidth="min-content"
                align="right"
                Cell={({
                    data: { offsetLabel },
                }: GridTableCellProps<TimedRelease>) => (
                    <span>{offsetLabel}</span>
                )}
            />
            <GridTable.Column
                name="time"
                title={$t(`${INTL_PREFIX}.time`)}
                minWidth="min-content"
                align="right"
                Cell={({
                    data: { localTime, offsetLabel },
                }: GridTableCellProps<TimedRelease>) => {
                    const baseDate = baseTime.format('YYYY-MM-DD');
                    const localDate = localTime.format('YYYY-MM-DD');
                    let dayDiffLabel = null;

                    if (localDate > baseDate) dayDiffLabel = '+1 Day';
                    if (localDate < baseDate) dayDiffLabel = '-1 Day';

                    return (
                        <>
                            {dayDiffLabel && (
                                <span
                                    data-testid={`${offsetLabel}-badge`}
                                    className={`${CLASS_NAME}-badge`}
                                >
                                    {dayDiffLabel}
                                </span>
                            )}
                            <span data-testid={`timed-release-${offsetLabel}`}>
                                {baseTime.isValid()
                                    ? localTime.format('h:mm A, DD MMM YYYY')
                                    : EMPTY_CHAR}
                            </span>
                        </>
                    );
                }}
            />
        </GridTable>
    );
};

export default TimedReleaseTable;