import type { FC } from 'react';
import React from 'react';
import { CoverArt, TruncatedText } from '@theorchard/suite-components';
import { createHref, formatDate } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Link } from 'react-router-dom';
import {
    EMPTY_CHAR,
    ROUTE_MONITOR_AUDIO,
    SONG_DATE_FORMAT,
} from 'src/constants';
import { recordDownloadDeliveryFileClicked } from 'src/utils/segment';
import { PhysicalDeliveryOrderStatus } from './data/globalTypes';
import type { CellProps } from './types';

const TRANSLATION_ORDER_PAGE = 'physical.monitorPage';

export const DateCell: FC<CellProps<object>> = ({ value }) => (
    <div className="DateCell">
        {value ? formatDate(value, SONG_DATE_FORMAT) : EMPTY_CHAR}
    </div>
);

export const TextCell: FC<CellProps<object>> | undefined = ({ value }) => (
    <TruncatedText
        text={value ? (value as string) : EMPTY_CHAR}
        maxWidth={200}
    />
);

export const DeliveryFulfilledDateCell: FC<
    CellProps<{
        orderDeliveryStatus: PhysicalDeliveryOrderStatus;
        lastUpdated: string;
    }>
> = ({ data: { orderDeliveryStatus, lastUpdated } }) => {
    if (orderDeliveryStatus === PhysicalDeliveryOrderStatus.COMPLETE)
        return (
            <div className="DateCell">
                {lastUpdated
                    ? formatDate(lastUpdated, SONG_DATE_FORMAT)
                    : EMPTY_CHAR}
            </div>
        );
    return <div className="DateCell">{EMPTY_CHAR}</div>;
};

export const DeliveryFulfilledTextCell: FC<
    CellProps<{
        orderDeliveryStatus: PhysicalDeliveryOrderStatus;
        lastUpdatedBy: string;
    }>
> = ({ data: { orderDeliveryStatus, lastUpdatedBy } }) => {
    if (orderDeliveryStatus === PhysicalDeliveryOrderStatus.COMPLETE)
        return (
            <TruncatedText text={lastUpdatedBy ?? EMPTY_CHAR} maxWidth={170} />
        );
    return <div>{EMPTY_CHAR}</div>;
};

export const JobStatusCell: FC<
    CellProps<{ orderDeliveryStatus: PhysicalDeliveryOrderStatus }>
> = ({ data: { orderDeliveryStatus: deliveryStatus } }) => {
    if (deliveryStatus === PhysicalDeliveryOrderStatus.IN_PROGRESS)
        return (
            <span>
                {$t(`${TRANSLATION_ORDER_PAGE}.tableActions.generating`)}
            </span>
        );
    if (deliveryStatus === PhysicalDeliveryOrderStatus.READY_FOR_DELIVERY)
        return (
            <span className="OrderStatus-ready">
                {$t(`${TRANSLATION_ORDER_PAGE}.readyForDelivery`)}
            </span>
        );
    if (deliveryStatus === PhysicalDeliveryOrderStatus.COMPLETE)
        return (
            <span className="OrderStatus-complete">
                {$t(`${TRANSLATION_ORDER_PAGE}.complete`)}
            </span>
        );
    if (deliveryStatus === PhysicalDeliveryOrderStatus.CANCELLED)
        return (
            <span className="OrderStatus-cancelled">
                {$t(`${TRANSLATION_ORDER_PAGE}.cancelled`)}
            </span>
        );
    if (deliveryStatus === PhysicalDeliveryOrderStatus.ERROR)
        return (
            <span className="OrderStatus-cancelled">
                {$t(`${TRANSLATION_ORDER_PAGE}.error`)}
            </span>
        );
    return <div className="EmptyCell">{EMPTY_CHAR}</div>;
};

export const OrderIdLinkCell: FC<
    CellProps<{
        orderId: string;
        totalProducts: number;
        orderDeliveryStatus: PhysicalDeliveryOrderStatus;
        outputFile: string;
    }>
> = ({
    data: {
        orderId,
        totalProducts,
        orderDeliveryStatus: deliveryStatus,
        outputFile,
    },
}) => {
    if (
        deliveryStatus === PhysicalDeliveryOrderStatus.IN_PROGRESS ||
        deliveryStatus === PhysicalDeliveryOrderStatus.ERROR ||
        !outputFile ||
        !totalProducts
    )
        return (
            <div>
                {$t(`${TRANSLATION_ORDER_PAGE}.productCount`, {
                    count: totalProducts ?? '-',
                })}
            </div>
        );
    if (
        (deliveryStatus === PhysicalDeliveryOrderStatus.CANCELLED ||
            deliveryStatus === PhysicalDeliveryOrderStatus.COMPLETE ||
            deliveryStatus ===
                PhysicalDeliveryOrderStatus.READY_FOR_DELIVERY) &&
        !!outputFile &&
        totalProducts > 0
    )
        return (
            <Link
                to={createHref(ROUTE_MONITOR_AUDIO, {
                    showBy: 'products',
                    orderId,
                })}
            >
                <TruncatedText
                    text={$t(`${TRANSLATION_ORDER_PAGE}.productCount`, {
                        count: totalProducts ?? '-',
                    })}
                    maxWidth={90}
                />
            </Link>
        );
    return <div>{EMPTY_CHAR}</div>;
};

export const DownloadFileCell: FC<
    CellProps<{
        orderDeliveryStatus: PhysicalDeliveryOrderStatus;
        outputFile: string;
    }>
> = ({ data: { orderDeliveryStatus: deliveryStatus, outputFile } }) => {
    if (deliveryStatus === PhysicalDeliveryOrderStatus.IN_PROGRESS)
        return (
            <span>
                {$t(`${TRANSLATION_ORDER_PAGE}.tableActions.generating`)}
            </span>
        );
    if (
        deliveryStatus === PhysicalDeliveryOrderStatus.CANCELLED ||
        deliveryStatus === PhysicalDeliveryOrderStatus.ERROR
    )
        return <span>{EMPTY_CHAR}</span>;
    if (
        (deliveryStatus === PhysicalDeliveryOrderStatus.READY_FOR_DELIVERY ||
            deliveryStatus === PhysicalDeliveryOrderStatus.COMPLETE) &&
        !!outputFile
    )
        return (
            <a
                className="DownloadFileCell"
                href={outputFile}
                onClick={() => recordDownloadDeliveryFileClicked()}
            >
                <span className="DownloadFileCell">
                    <GlyphIcon name="download" size={16} />
                    {$t(`${TRANSLATION_ORDER_PAGE}.tableActions.downloadFile`)}
                </span>
            </a>
        );
    return <div className="EmptyCell">{EMPTY_CHAR}</div>;
};

export const ThumbnailProductCell: FC<CellProps<{ imageLocation: string }>> = ({
    data,
    value,
}) => (
    <div className="ThumbnailParticipantLinkCell CoverArtCell">
        <CoverArt url={data.imageLocation} shape="square" width="30" />
        <div className="text-content">
            <TruncatedText
                text={value ? (value as string) : EMPTY_CHAR}
                maxWidth={160}
            />
        </div>
    </div>
);