import type { FC } from 'react';
import React, { useState } from 'react';
import cx from 'classnames';
import { PRIMARY, SECONDARY } from 'src/constants';
import { AudioPlayerSection } from './audioPlayerSection';
import { getAudioCorrectionIds } from './utils';
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 = 'ProductTracksAudioPlayer';
const INTL_PREFIX = 'contentReview.productTracksAudioPlayer';

export interface Props {
    product: Product;
    mergedProduct: MergedProduct;
    track: TrackMetadata;
    audioStatus: number;
    onChangeAudioStatus: (value: number) => void;
    onChangeCurrentTrack: (tuid: string, trackNumber?: number) => void;
}

const ProductTracksAudioPlayer: FC<Props> = ({
    track,
    product,
    mergedProduct,
    onChangeAudioStatus,
    onChangeCurrentTrack,
    audioStatus,
}) => {
    const [activePlayer, setActivePlayer] = useState<string>(PRIMARY);
    const productCorrections = product.releaseCorrection?.items ?? [];
    const audioCorrectionIds = getAudioCorrectionIds(productCorrections);
    const primaryTrackTitle = `Track ${track.trackNumber.get()}: ${track.trackName.get()}`;

    const handleCurrentTrackChange = () =>
        onChangeCurrentTrack(
            String(track.tuid),
            Number(track.trackNumber.get())
        );

    const renderSecondaryAudioPlayer = () => {
        return audioCorrectionIds.includes(track.tuid) ? (
            <AudioPlayerSection
                tuid={track.tuid}
                section={SECONDARY}
                audioCorrectionIds={audioCorrectionIds}
                onChangeAudioStatus={onChangeAudioStatus}
                audioStatus={audioStatus}
                isActive={activePlayer === SECONDARY}
                setActivePlayer={setActivePlayer}
                onChangeCurrentTrack={handleCurrentTrackChange}
            />
        ) : (
            <div
                className={`${CLASS_NAME}-no-audio`}
                data-testid={`${CLASS_NAME}-no-audio`}
            >
                {$t(`${INTL_PREFIX}.noPreviousAudio`)}
            </div>
        );
    };

    return (
        <div
            className={cx(
                CLASS_NAME,
                mergedProduct.isRevision ? 'grid-layout' : 'flex-layout'
            )}
            data-testid={CLASS_NAME}
        >
            <AudioPlayerSection
                tuid={track.tuid}
                section={PRIMARY}
                title={primaryTrackTitle}
                audioCorrectionIds={audioCorrectionIds}
                onChangeAudioStatus={onChangeAudioStatus}
                audioStatus={audioStatus}
                isActive={activePlayer === PRIMARY}
                setActivePlayer={setActivePlayer}
                onChangeCurrentTrack={handleCurrentTrackChange}
            />
            {mergedProduct.isRevision && renderSecondaryAudioPlayer()}
        </div>
    );
};

export default ProductTracksAudioPlayer;