import type { FC } from 'react';
import React from 'react';
import { GridTable, Section } from '@theorchard/suite-components';
import { formatDate } from '@theorchard/suite-frontend';
import { EMPTY_CHAR, SONG_DATE_FORMAT } 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';

interface Props {
    product: Product;
}

interface PricingOverride {
    orchardPricingTier: { id: number | string; name: string };
    intervalStart: string | Date;
    intervalEnd: string | Date;
    rowNumber: number | null;
}

const CLASS_NAME = 'AlbumPricing';

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

    if (!loading && data) {
        pricingLabel =
            data.albumPricingTier?.orchardPricingTier.name || pricingLabel;
        if (data.albumPricingTier && data.albumPricingTier.productOverrides) {
            for (const album of data.albumPricingTier.productOverrides) {
                pricingOverrides.push({
                    orchardPricingTier: { ...album.orchardPricingTier },
                    intervalEnd: album.intervalEnd,
                    intervalStart: album.intervalStart,
                    rowNumber,
                });
                rowNumber++;
            }
        }
    }
    if (!pricingOverrides.length)
        pricingOverrides.push({
            orchardPricingTier: { id: 0, name: '' },
            intervalStart: '',
            intervalEnd: '',
            rowNumber: null,
        });

    return (
        <Section testId={`${CLASS_NAME}-section`}>
            <Section.Header className="fragment-heading">
                {$t(`contentReview.schedulingAndPricing.downloadAlbumPricing`)}
            </Section.Header>

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

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

                        <GridTable.Column
                            name="albumIntervalPricing"
                            title={$t(
                                `contentReview.schedulingAndPricing.albumIntervalPricing`
                            )}
                            minWidth="45rem"
                            Cell={({
                                data: { orchardPricingTier },
                            }: GridTableCellProps<PricingOverride>) => (
                                <span>
                                    {orchardPricingTier.name || EMPTY_CHAR}
                                </span>
                            )}
                        />
                        <GridTable.Column
                            name="startDate"
                            title={$t(
                                `contentReview.schedulingAndPricing.startDate`
                            )}
                            align="right"
                            minWidth="12rem"
                            Cell={({
                                data: { intervalStart },
                            }: GridTableCellProps<PricingOverride>) => (
                                <span>
                                    {(intervalStart &&
                                        formatDate(
                                            intervalStart,
                                            SONG_DATE_FORMAT
                                        )) ||
                                        EMPTY_CHAR}
                                </span>
                            )}
                        />
                        <GridTable.Column
                            name="endDate"
                            title={$t(
                                `contentReview.schedulingAndPricing.endDate`
                            )}
                            align="right"
                            minWidth="12rem"
                            Cell={({
                                data: { intervalEnd },
                            }: GridTableCellProps<PricingOverride>) => (
                                <span>
                                    {(intervalEnd &&
                                        formatDate(
                                            intervalEnd,
                                            SONG_DATE_FORMAT
                                        )) ||
                                        EMPTY_CHAR}
                                </span>
                            )}
                        />
                    </GridTable>
                </Section.Table>
            </div>
        </Section>
    );
};

export default AlbumPricing;