import React from 'react';
import {
    Button,
    Card,
    LoadingSpinner,
    Tooltip,
} from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useHistory } from 'react-router-dom';
import { useGetIngestionReportQuery } from 'src/data/queries/getIngestionReport';
import { ButtonType, IconType } from './types';
import './index.scss';
interface BulkSessionsCardProps {
    titleText: string;
    createdAt: string | null;
    fileName: string;
    iconType?: IconType;
    buttonType?: ButtonType;
    bodyText?: string;
    sessionId?: string;
    downloadLink?: string;
    ingestionId?: string;
}

const BulkSessionsCard = ({
    titleText,
    createdAt,
    fileName,
    iconType,
    buttonType,
    bodyText,
    downloadLink,
    sessionId,
    ingestionId,
}: BulkSessionsCardProps) => {
    const componentName = 'bulk-sessions-card';
    const history = useHistory();

    const getIngestionReport = useGetIngestionReportQuery();

    const renderIcon = (iconType: IconType | undefined) => {
        if (iconType === IconType.Loading)
            return (
                <LoadingSpinner
                    show
                    size={24}
                    className={`${componentName}-spinner`}
                />
            );
        if (iconType === IconType.Success)
            return (
                <div className={`${componentName}-success-icon`}>
                    <GlyphIcon name="success" size={24} />
                </div>
            );
        if (iconType === IconType.Warning)
            return (
                <div className={`${componentName}-warning-icon`}>
                    <GlyphIcon name="warning" size={24} />
                </div>
            );
        if (iconType === IconType.Failure)
            return (
                <div className={`${componentName}-failure-icon`}>
                    <GlyphIcon name="warning" size={24} />
                </div>
            );
        return <div></div>;
    };

    const buttonOnClick = () => {
        if (buttonType === ButtonType.View && sessionId)
            history.push(`/create/digital-audio/bulk?id=${sessionId}`);
        if (buttonType === ButtonType.Report && ingestionId) {
            getIngestionReport(ingestionId)
                .then(downloadLink => window.open(downloadLink, '_blank'))
                .catch(() => null);
        }
    };

    const renderButton = (
        buttonType: ButtonType | undefined,
        downloadLink: string | undefined,
        ingestionId: string | undefined
    ) => {
        if (buttonType === ButtonType.View)
            return (
                <Button
                    variant="quartenary"
                    size="sm"
                    className={`${componentName}-button`}
                    onClick={buttonOnClick}
                >
                    {$t('bulkDigitalAudioSidecar.bulkSessionsCard.viewButton')}
                </Button>
            );
        if (buttonType === ButtonType.Report && (downloadLink || ingestionId))
            return (
                <Button
                    variant="secondary"
                    size="sm"
                    className={`${componentName}-button`}
                    onClick={buttonOnClick}
                >
                    <GlyphIcon name="download" size={12} />
                    {$t(
                        'bulkDigitalAudioSidecar.bulkSessionsCard.reportButton'
                    )}
                </Button>
            );
        return <div></div>;
    };

    const formatDatetime = (dateString: string | null) => {
        const date = new Date(dateString ?? '');
        if (date.toString() === 'Invalid Date') return 'N/A';
        return date.toLocaleDateString('en-US', {
            month: 'long',
            day: 'numeric',
            year: 'numeric',
            hour: 'numeric',
            minute: 'numeric',
        });
    };

    return (
        <Card suite className={`${componentName}`}>
            <Card.Header className={`${componentName}-header`}>
                {renderIcon(iconType)}
                <Card.Title>{titleText}</Card.Title>
                {renderButton(buttonType, downloadLink, ingestionId)}
            </Card.Header>
            <Card.Body className={`${componentName}-content`}>
                <Card.Text>{bodyText}</Card.Text>
                <div className={`${componentName}-footer`}>
                    <Card.Text className={`${componentName}-user-and-date`}>
                        {formatMessage(
                            'bulkDigitalAudioSidecar.bulkSessionsCard.footerText',
                            {
                                createdAt: formatDatetime(createdAt),
                            }
                        )}
                    </Card.Text>
                    <div className={`${componentName}-file-info`}>
                        <Card.Text>
                            {$t(
                                'bulkDigitalAudioSidecar.bulkSessionsCard.fileName'
                            )}
                        </Card.Text>
                        <Tooltip
                            className={`${componentName}-tooltip`}
                            id={`${componentName}-tooltip`}
                            message={fileName}
                        >
                            <GlyphIcon name="info" size={12} />
                        </Tooltip>
                    </div>
                </div>
            </Card.Body>
        </Card>
    );
};

export default BulkSessionsCard;