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

interface Props {
    product: Product;
}

interface InstantGrats {
    date: string;
    store: {
        storeId: number;
        storeName: string;
    };
    track: {
        tuid: string;
        trackName: string | null;
        trackCount: number | null;
    };
}

const CLASS_NAME = 'PreOrder';

const PreOrder: FC<Props> = ({ product }) => {
    let trackCount = 0;
    const instantGrats: (InstantGrat | null)[] = product.tracks.flatMap(
        track => {
            if (!track.instantGrats) return [];
            return track.instantGrats.map(instantGrat => {
                if (!instantGrat) return null;
                const igTrackName = instantGrat.track?.trackName;
                let igDate = '';
                if (instantGrat.date)
                    igDate = dayjs(instantGrat.date).format(SONG_DATE_FORMAT);
                trackCount++;
                return {
                    track: {
                        trackName: igTrackName,
                        tuid: instantGrat.track?.tuid,
                        trackCount,
                    },
                    store: {
                        storeId: instantGrat.store?.storeId,
                        storeName: instantGrat.store?.storeName,
                    },
                    date: igDate,
                };
            });
        }
    );
    if (!instantGrats.length)
        instantGrats.push({
            track: { trackName: '', tuid: '' },
            store: { storeId: 0, storeName: '' },
            date: '',
        });

    const getPreorderDate = (date: GQLDate | null) => {
        if (!date || date === '0000-00-00') return EMPTY_CHAR;
        if (product.preorderDate === '1900-01-01')
            return $t(`contentReview.schedulingAndPricing.immediate`);
        return dayjs(date).format(SONG_DATE_FORMAT);
    };

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

            <div className={CLASS_NAME_ROW}>
                <div className={CLASS_NAME_COLUMN}>
                    <div className="fieldLabel">
                        {$t(`contentReview.schedulingAndPricing.preorder`)}
                    </div>
                    <div className="value">
                        {getPreorderDate(product.preorderDate)}
                    </div>
                </div>
                <div className={CLASS_NAME_COLUMN}>
                    <div className="fieldLabel">
                        {$t(`contentReview.schedulingAndPricing.previewable`)}
                    </div>
                    <div className="value">
                        {product.previewable || EMPTY_CHAR}
                    </div>
                </div>
            </div>

            <Section.Header className="fragment-heading">
                {$t(`contentReview.schedulingAndPricing.instantGrats`)}
            </Section.Header>

            <Section.Table>
                <GridTable
                    className="scheduling-and-pricing-table"
                    rowKey={row => `${row?.track.tuid}-${row?.store.storeName}`}
                    data={instantGrats}
                    bordered
                    variant="zebra"
                >
                    <GridTable.Column
                        name="number"
                        title={'#'}
                        minWidth="2rem"
                        maxWidth="3rem"
                        align="center"
                        Cell={({
                            data: { track },
                        }: GridTableCellProps<InstantGrats>) => (
                            <span>{track.trackCount || EMPTY_CHAR}</span>
                        )}
                    />
                    <GridTable.Column
                        name="track"
                        title={$t(`contentReview.schedulingAndPricing.track`)}
                        minWidth="45rem"
                        Cell={({
                            data: { track },
                        }: GridTableCellProps<InstantGrat>) => (
                            <span>{track.trackName || EMPTY_CHAR}</span>
                        )}
                    />
                    <GridTable.Column
                        name="store"
                        title={$t(`contentReview.schedulingAndPricing.store`)}
                        minWidth="19rem"
                        Cell={({
                            data: { store },
                        }: GridTableCellProps<InstantGrat>) => (
                            <span>{store.storeName || EMPTY_CHAR}</span>
                        )}
                    />
                    <GridTable.Column
                        name="startDate"
                        title={$t(
                            `contentReview.schedulingAndPricing.startDate`
                        )}
                        minWidth="min-content"
                        align="right"
                        Cell={({
                            data: { date },
                        }: GridTableCellProps<InstantGrat>) => (
                            <span>{date || EMPTY_CHAR}</span>
                        )}
                    />
                </GridTable>
            </Section.Table>
        </Section>
    );
};

export default PreOrder;