import type { FC } from 'react';
import React, { useState } from 'react';
import { Section } from '@theorchard/suite-components';
import { AudioInfringementModalProvider } from 'src/components/audioInfringementModalProvider/audioInfringementModalProvider';
import ProductTracksAudioPlayer from '../productTracksAudioPlayer';
import ProductTracksTable from '../productTracksTable/productTracksTable';
import SectionTitle from '../sectionTitle';
import type { Product } from 'src/data/queries/product/types';
import type { MergedProduct } from 'src/product/product';
import type { TrackMetadata } from 'src/product/track';
export const CLASS_NAME = 'ProductTracks';
export const INTL_PREFIX = 'contentReview.productTracks';

export interface Props {
    product: Product;
    mergedProduct: MergedProduct;
    isMergedProductFullyLoaded: boolean;
}

const ProductTracks: FC<Props> = ({
    product,
    mergedProduct,
    isMergedProductFullyLoaded,
}) => {
    const trackList = mergedProduct.getTrackList();

    const [track, setTrack] = useState<TrackMetadata>(trackList[0]);
    const [currentTuid, setCurrentTuid] = useState<string>('');
    const [audioStatus, setAudioStatus] = useState<number>(0);

    const handleUpdateCurrentTrack = (tuid: string, trackNumber?: number) => {
        setCurrentTuid(tuid);

        if (trackNumber && track.trackNumber.get() !== trackNumber) {
            setTrack(trackList[trackNumber - 1]);
        }
    };

    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <SectionTitle
                title={$t(`${INTL_PREFIX}.tracks`)}
                productId={mergedProduct.basics.productId}
                section="Tracks"
                isRevision={mergedProduct.isRevision}
            />
            <Section>
                <Section.Body>
                    <Section>
                        <Section.Body>
                            <ProductTracksAudioPlayer
                                product={product}
                                mergedProduct={mergedProduct}
                                track={track}
                                onChangeAudioStatus={setAudioStatus}
                                onChangeCurrentTrack={handleUpdateCurrentTrack}
                                audioStatus={audioStatus}
                            />
                        </Section.Body>
                    </Section>
                </Section.Body>

                <AudioInfringementModalProvider>
                    <ProductTracksTable
                        product={mergedProduct}
                        isMergedProductFullyLoaded={isMergedProductFullyLoaded}
                        currentTrackId={currentTuid}
                        onChangeCurrentTrack={(tuid, trackNumber?: number) =>
                            handleUpdateCurrentTrack(tuid, trackNumber)
                        }
                        onChangeAudioStatus={(value: number) =>
                            setAudioStatus(value)
                        }
                        audioStatus={audioStatus}
                    />
                </AudioInfringementModalProvider>
            </Section>
        </div>
    );
};

export default ProductTracks;