import type { FC } from 'react';
import React from 'react';
import { GridTable, Section } from '@theorchard/suite-components';
import { EMPTY_CHAR } from 'src/constants';
import { useProductPricingQuery } from 'src/data/queries';
import {
    CLASS_NAME_COLUMN,
    CLASS_NAME_ROW,
} from 'src/pages/productModal/components/schedulingAndPricing/schedulingAndPricing';
import type { GridTableCellProps } from '@theorchard/suite-components';
import type { Product } from 'src/data/queries/product/types';
import type { TrackOverride } from 'src/data/queries/productPricing/types';

interface Props {
    product: Product;
}

interface trackOverrides {
    trackId: string;
    orchardPricingTier: {
        id: string;
        name: string;
    };
    rowNumber: number | null;
}

const CLASS_NAME = 'TrackPricing';

const getTrackNameByIdFromProduct = (
    product: Product,
    trackId: string | number
): string => {
    const trackMatch = product.tracks.find(
        ({ tuid }) => tuid === trackId.toString()
    );
    if (trackMatch && trackMatch.trackName) return trackMatch.trackName;
    return '';
};

const TrackPricing: FC<Props> = ({ product }) => {
    const { loading, data } = useProductPricingQuery(product.productId);
    const pricingOverrides: trackOverrides[] = [];
    let pricingLabel = EMPTY_CHAR;
    let rowNumber = 1;

    if (!loading && data) {
        pricingLabel =
            data.trackPricingTier?.orchardPricingTier.name || pricingLabel;
        if (data.trackPricingTier && data.trackPricingTier.trackOverrides) {
            for (const track of data.trackPricingTier.trackOverrides) {
                pricingOverrides.push({
                    trackId: track.trackId,
                    orchardPricingTier: { ...track.orchardPricingTier },
                    rowNumber,
                });
                rowNumber++;
            }
        }
    }
    if (!pricingOverrides.length)
        pricingOverrides.push({
            orchardPricingTier: { id: '0', name: '' },
            trackId: '0',
            rowNumber: null,
        });
    return (
        <Section testId={`${CLASS_NAME}-section`}>
            <Section.Header className="fragment-heading">
                {$t(`contentReview.schedulingAndPricing.downloadTrackPricing`)}
            </Section.Header>

            <div className={CLASS_NAME_ROW}>
                <div className={CLASS_NAME_COLUMN}>
                    <div className="fieldLabel">
                        {$t(`contentReview.schedulingAndPricing.trackPricing`)}
                    </div>
                    <div className="value">{pricingLabel}</div>
                </div>
            </div>
            <div>
                <Section.Header className="fragment-heading">
                    {$t(
                        `contentReview.schedulingAndPricing.individualTrackPricing`
                    )}
                </Section.Header>

                <Section.Table>
                    <GridTable
                        className="scheduling-and-pricing-table"
                        rowKey={row =>
                            `${product.productId}.${row.trackId}.${row.orchardPricingTier?.id}`
                        }
                        data={pricingOverrides}
                        bordered
                        variant="zebra"
                    >
                        <GridTable.Column
                            name="number"
                            title={'#'}
                            minWidth="2rem"
                            maxWidth="3rem"
                            align="center"
                            Cell={({
                                data: { rowNumber },
                            }: GridTableCellProps<trackOverrides>) => (
                                <span>{rowNumber || EMPTY_CHAR}</span>
                            )}
                        />

                        <GridTable.Column
                            name="track"
                            title={$t(
                                `contentReview.schedulingAndPricing.track`
                            )}
                            minWidth="52rem"
                            Cell={({
                                data: { trackId },
                            }: GridTableCellProps<TrackOverride>) => (
                                <span>
                                    {getTrackNameByIdFromProduct(
                                        product,
                                        trackId
                                    ) || EMPTY_CHAR}
                                </span>
                            )}
                        />
                        <GridTable.Column
                            name="individualTrackPricing"
                            title={$t(
                                `contentReview.schedulingAndPricing.individualTrackPricing`
                            )}
                            minWidth="16rem"
                            Cell={({
                                data: { orchardPricingTier },
                            }: GridTableCellProps<TrackOverride>) => (
                                <span>
                                    {orchardPricingTier?.name || EMPTY_CHAR}
                                </span>
                            )}
                        />
                    </GridTable>
                </Section.Table>
            </div>
        </Section>
    );
};

export default TrackPricing;