import type { FC } from 'react';
import React, { useRef } from 'react';
import { TruncatedText, Highlight } from '@theorchard/suite-components';
import {
    createHref,
    formatDate,
    useIdentity,
} from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Link } from 'react-router-dom';
import {
    EMPTY_CHAR,
    ROUTE_SONG,
    SONG_DATE_FORMAT,
    SONG_DATETIME_FORMAT,
} from 'src/constants';
import {
    recordNrIdClick,
    recordDownloadDeliveryFile,
} from 'src/utils/segment/segment';
import type { CellProps } from './types';

export const LoadingCommonCell = () => (
    <div className="loading" data-testid="LoadingCommonCell">
        <div className="loading-common-bar" />
    </div>
);

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

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

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

export const ArtistCell: FC<CellProps<{ mainArtist: string }>> = ({
    data: { mainArtist },
}) => <TruncatedText text={mainArtist} />;

export const SongNameLinkCell: FC<
    CellProps<{ srNameVersion: string; nrSrId: string }>
> = ({ data: { srNameVersion, nrSrId } }) => {
    const target = useRef(null);
    const { roles } = useIdentity();
    const isPerformanceUser = roles?.includes('manage_nr_repertoire');
    const useLink = !!nrSrId && isPerformanceUser;
    // Due to the column that is being minWidth 300px, setting the maxWidth of truncated text to 270 in order to fit the text
    return useLink ? (
        <Link
            to={createHref(ROUTE_SONG, { nrSrId })}
            ref={target}
            onClick={recordNrIdClick}
        >
            <TruncatedText text={srNameVersion} maxWidth={270} />
        </Link>
    ) : (
        <TruncatedText text={srNameVersion} maxWidth={270} />
    );
};

export const DownloadFileCell: FC<CellProps<{ outputFile: string }>> = ({
    data: { outputFile },
}) => {
    if (outputFile)
        return (
            <a
                className="DownloadFileCell"
                href={outputFile}
                onClick={recordDownloadDeliveryFile}
            >
                <span className="DownloadFileCell">
                    <GlyphIcon name="download" size={16} />
                    {$t('neighbouringRights.delivery.downloadReady')}
                </span>
            </a>
        );
    return <div className="EmptyCell">{EMPTY_CHAR}</div>;
};

export const ContributorNameAndValidCell: FC<
    CellProps<{ contributorName: string; valid: string }>
> = ({ data: { contributorName, valid } }) => {
    return (
        <span>
            <TruncatedText
                text={
                    contributorName ? (contributorName as string) : EMPTY_CHAR
                }
                maxWidth={200}
            />
            {!valid && (
                <Highlight
                    className="InvalidContributorHighlight"
                    variant="neutral"
                >
                    Invalid Contributor
                </Highlight>
            )}
        </span>
    );
};