import { Button } from '@theorchard/suite-components';
import cx from 'classnames';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import React from 'react';
import type { FC } from 'react';

dayjs.extend(utc);

interface TimezoneConverterLinkProps {
    dateTime: string;
    className?: string;
}

export const BASE_URL = 'https://www.timeanddate.com/worldclock/converter.html';
export const DEFAULT_PARAMS = {
    p1: 'tz_gmt',
    p2: '179',
    p3: '224',
    p4: '136',
    p5: 'tz_kst',
    p6: 'tz_aet',
};

export const TimezoneConverterLink: FC<TimezoneConverterLinkProps> = ({
    dateTime,
    className,
}) => (
    <Button
        className={cx('TimezoneConverterLink', className)}
        variant="link"
        onClick={() => {
            const params = new URLSearchParams({
                iso: dayjs.utc(dateTime).format('YYYYMMDDTHHmmss'),
                ...DEFAULT_PARAMS,
            });
            window.open(`${BASE_URL}?${params.toString()}`, '_blank');
        }}
        target="_blank"
    >
        {$t('releaseScheduler.timezoneConverterLink.text')}
    </Button>
);

export default TimezoneConverterLink;