import { GridTable } from '@theorchard/suite-components';
import { ENV_PROD, useAppConfig } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import React from 'react';
import type { FC } from 'react';
import type { AccountAndProductTracksFingerprintRules } from 'src/types';

export const CLASS_NAME = 'FingerprintRestrictionsTable';

export interface Props {
    page: number;
    setPage: (page: number) => void;
    pageSize: number;
    setPageSize: (page: number) => void;
    loading: boolean;
    data?: AccountAndProductTracksFingerprintRules;
}

const FingerprintRestrictionsTable: FC<Props> = ({
    page,
    setPage,
    pageSize,
    setPageSize,
    loading,
    data,
}) => {
    const { environment } = useAppConfig();

    const formattedData = data?.tracks.map(track => ({
        number: track.trackNumber,
        track: track.trackName + (track.version ? ` (${track.version})` : ''),
        isrc: track.isrc,
        accountRules: data?.vendorRules.length,
        subAccountRules: data?.subaccountRules.length,
        trackRules: track.rules.length,
    }));

    const handleAction = (isrc?: string | null) => {
        const trackId = data?.tracks.find(t => t.isrc === isrc)?.tuid;

        let contentUrl = `https://content.qaorch.com/catalog/digital-audio/${data?.productId}/track/${trackId}?tab=delivery`;
        if (environment === ENV_PROD)
            contentUrl = `https://content.theorchard.com/catalog/digital-audio/${data?.productId}/track/${trackId}?tab=delivery`;

        open(contentUrl, '_blank');
    };

    return (
        <GridTable
            className={CLASS_NAME}
            name="fingerprint-restrictions"
            variant="zebra"
            data={formattedData}
            rowKey="id"
            paginated
            loading={loading}
            loadingRows={pageSize}
            totalCount={data?.numberOfTracks}
            page={page}
            pageSize={pageSize}
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            rowActions={{
                externalLink: {
                    icon: <GlyphIcon name="externalLink" size={16} />,
                    onClick: ({ isrc }) => handleAction(isrc),
                },
            }}
        >
            <GridTable.Column
                className={`${CLASS_NAME}-cell-number`}
                title="#"
                name="number"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-track`}
                title={$t(
                    'fingerprintRestrictions.fingerprintRestrictionsOaPanel.table.titles.track'
                )}
                name="track"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-isrc`}
                title={$t(
                    'fingerprintRestrictions.fingerprintRestrictionsOaPanel.table.titles.isrc'
                )}
                name="isrc"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-account-rules`}
                title={$t(
                    'fingerprintRestrictions.fingerprintRestrictionsOaPanel.table.titles.accountRules'
                )}
                name="accountRules"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-sub-account-rules`}
                title={$t(
                    'fingerprintRestrictions.fingerprintRestrictionsOaPanel.table.titles.subAccountRules'
                )}
                name="subAccountRules"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-track-rules`}
                title={$t(
                    'fingerprintRestrictions.fingerprintRestrictionsOaPanel.table.titles.trackRules'
                )}
                name="trackRules"
            />
        </GridTable>
    );
};

export default FingerprintRestrictionsTable;