import type { FC } from 'react';
import React from 'react';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { CoverArt } from '@theorchard/suite-components';
import { formatDate } from '@theorchard/suite-frontend';
import TruncatedText from 'src/components/truncatedText';
import { EMPTY_CHAR, SONG_DATE_FORMAT } from 'src/constants';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { ReviewQueueSearchItem } from 'src/data/queries/reviewQueueSearch/types';

dayjs.extend(utc);

export const TruncatedTextCell: FC<CellProps<object>> = ({ value }) => (
    <TruncatedText value={value?.toString() || EMPTY_CHAR} />
);

export const ThumbnailProductCell: FC<CellProps<ReviewQueueSearchItem>> = ({
    data: { format, imageLocation },
    value,
}) => (
    <div className="CoverArtCell">
        <CoverArt url={imageLocation} shape="square" width="40" />
        <div className="text-content">
            <TruncatedText value={value?.toString()} />
            <div className="format">{format}</div>
        </div>
    </div>
);

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 UtcDateCell: FC<CellProps<object>> = ({ value }) => (
    <div className="DateCell">
        {value ? dayjs.utc(value).format(SONG_DATE_FORMAT) : EMPTY_CHAR}
    </div>
);

export const AccountSubaccountCell: FC<CellProps<ReviewQueueSearchItem>> = ({
    data: { subaccountName },
    value,
}) => (
    <TruncatedText
        value={
            subaccountName
                ? `${subaccountName?.toString()} (${value?.toString()})`
                : value?.toString()
        }
    />
);