import type { FC } from 'react';
import React, { useState } from 'react';
import {
    GridTable,
    Metadata,
    Section,
    TruncatedText,
} from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { useTablePagination } from 'src/utils/useTablePagination';
import DspList from './dspList';
import { INTL_PREFIX } from './potentialAudioInfringementModal';
import type {
    GridTableRowInstance,
    GridTableCellProps,
} from '@theorchard/suite-components';
import type {
    PotentialAudioInfringementModalTableData,
    TrackFieldValidationExtra,
} from 'src/types';

export const CLASS_NAME = `PotentialAudioInfringementModal-MatchesTable`;

interface MatchesTableProps {
    trackMetadata: TrackFieldValidationExtra;
    trackDataLoading: boolean;
    tableData: PotentialAudioInfringementModalTableData[];
}

const MatchesTable: FC<MatchesTableProps> = ({
    trackMetadata,
    trackDataLoading,
    tableData,
}) => {
    const { trackName, label, imprint, artists } = trackMetadata;
    const [expandedRows, setExpandedRows] = useState<Record<string, FC>>({});
    const { data: pageData, ...pagination } =
        useTablePagination<PotentialAudioInfringementModalTableData>(
            tableData,
            { pageSize: 5, alwaysVisible: true }
        );

    const ImprintNameCell = ({
        data: { accountId, imprintName },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => (
        <div className="cell-imprintName-container">
            <TruncatedText
                text={imprintName}
                maxWidth={270}
                numberOfLines={3}
            />
            {accountId && (
                <div className="accountId">
                    {formatMessage(`${INTL_PREFIX}.accountId`, {
                        accountId: accountId,
                    })}
                </div>
            )}
        </div>
    );

    const MatchTypeCell = ({
        data: { matchType },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => (
        <div className="matchType">
            {formatMessage(`${INTL_PREFIX}.${matchType}`)}
        </div>
    );

    const TrackNameCell = ({
        data: { trackName },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => (
        <div className="trackName">
            <TruncatedText text={trackName} maxWidth={270} numberOfLines={3} />
        </div>
    );

    const ArtistNameCell = ({
        data: { artistName },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => (
        <div className="artistName">
            <TruncatedText
                text={artistName.toString()}
                maxWidth={270}
                numberOfLines={3}
            />
        </div>
    );

    const DistributorNameCell = ({
        data: { distributorName },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => (
        <div className="distributorName">
            <TruncatedText
                text={distributorName.toString()}
                maxWidth={270}
                numberOfLines={3}
            />
        </div>
    );

    const handleRowClick = ({
        key,
        data: { upc, matchType, oaTrackLink, songwhipLinks },
    }: GridTableRowInstance<PotentialAudioInfringementModalTableData>) => {
        if (expandedRows[key]) {
            setExpandedRows({});
            return;
        }

        setExpandedRows({
            [key]: () => (
                <DspList
                    upc={upc}
                    matchType={matchType}
                    oaTrackLink={oaTrackLink}
                    songwhipLinks={songwhipLinks}
                    className={CLASS_NAME}
                />
            ),
        });
    };

    const ServicesCountCell = ({
        data: { matchType, songwhipLinks },
    }: GridTableCellProps<PotentialAudioInfringementModalTableData>) => {
        const servicesCount =
            matchType === 'internal'
                ? 1
                : Object.keys(songwhipLinks ?? {}).length;

        return <span>{servicesCount}</span>;
    };

    return (
        <Section className={`${CLASS_NAME}`} data-testid="MatchesTable">
            <div className={`${CLASS_NAME}-title`}>
                {formatMessage(`${INTL_PREFIX}.trackTitle`)}
            </div>
            <Section.Header>
                <div className={`${CLASS_NAME}-header`}>
                    <div className="label">
                        <Metadata
                            label={formatMessage(`${INTL_PREFIX}.trackName`)}
                        >
                            {trackName}
                        </Metadata>
                    </div>
                    <div className="label">
                        <Metadata
                            label={formatMessage(`${INTL_PREFIX}.artistName`)}
                        >
                            {artists}
                        </Metadata>
                    </div>
                    <div className="label">
                        <Metadata
                            label={formatMessage(`${INTL_PREFIX}.accountName`)}
                        >
                            {label}
                        </Metadata>
                    </div>
                    <div className="imprint">
                        <Metadata
                            label={formatMessage(`${INTL_PREFIX}.imprintName`)}
                        >
                            {imprint}
                        </Metadata>
                    </div>
                </div>
            </Section.Header>
            <Section.Body>
                <div className={`${CLASS_NAME}-title`}>
                    {formatMessage(`${INTL_PREFIX}.matchesTableTitle`)}
                </div>
                <Section.Table>
                    <GridTable
                        className={`${CLASS_NAME}-table`}
                        rowKey="trackNumber"
                        data={pageData}
                        variant="zebra"
                        bordered
                        loading={trackDataLoading}
                        onRowClick={handleRowClick}
                        expandedRows={expandedRows}
                        {...pagination}
                        pageSizeOptions={[5, 10, 20]}
                    >
                        <GridTable.Column
                            name="trackNumber"
                            title="#"
                            minWidth="2rem"
                            maxWidth="3rem"
                        />
                        <GridTable.Column
                            name="trackName"
                            title={formatMessage(`${INTL_PREFIX}.trackName`)}
                            minWidth="14rem"
                            Cell={TrackNameCell}
                        />
                        <GridTable.Column
                            name="artistName"
                            title={formatMessage(`${INTL_PREFIX}.artistName`)}
                            minWidth="12rem"
                            Cell={ArtistNameCell}
                        />
                        <GridTable.Column
                            name="imprintName"
                            title={formatMessage(`${INTL_PREFIX}.imprintName`)}
                            minWidth="12rem"
                            Cell={ImprintNameCell}
                        />
                        <GridTable.Column
                            name="distributorName"
                            title={formatMessage(
                                `${INTL_PREFIX}.distributorName`
                            )}
                            minWidth="12rem"
                            Cell={DistributorNameCell}
                        />
                        <GridTable.Column
                            name="matchType"
                            title={formatMessage(`${INTL_PREFIX}.matchType`)}
                            minWidth="12rem"
                            Cell={MatchTypeCell}
                        />
                        <GridTable.Column
                            name="services"
                            title={formatMessage(`${INTL_PREFIX}.matchesLabel`)}
                            minWidth="12rem"
                            align="right"
                            Cell={ServicesCountCell}
                        />
                    </GridTable>
                </Section.Table>
            </Section.Body>
        </Section>
    );
};

export default MatchesTable;