import type { FC } from 'react';
import React, { useState } from 'react';
import { GlyphButton } from '@theorchard/suite-components';
import {
    START_REQUESTED,
    PAUSE,
    PLAY,
    PLAY_REQUESTED,
    PAUSE_REQUESTED,
    STOP_REQUESTED,
} from 'src/constants';
import { trackContentReviewEventMerged } from 'src/utils/product';
import type { MergedProduct } from 'src/product/product';

export interface Props {
    tuid: string;
    trackNumber: string | number | null;
    currentTrackId: string;
    onChangeCurrentTrack: (a: string, b?: number) => void;
    onChangeAudioStatus: (value: number) => void;
    product: MergedProduct;
    audioStatus: number;
}

const ProductTrackAudioContainer: FC<Props> = ({
    product,
    tuid,
    trackNumber,
    currentTrackId,
    onChangeCurrentTrack,
    onChangeAudioStatus,
    audioStatus,
}) => {
    const [loading, setLoading] = useState(false);

    const handleButtonClick = () => {
        let eventType = 'Pause';

        if (
            currentTrackId === tuid &&
            (audioStatus === PLAY_REQUESTED || audioStatus === START_REQUESTED)
        ) {
            onChangeAudioStatus(PAUSE_REQUESTED);
        } else if (
            currentTrackId === tuid &&
            (audioStatus === PAUSE_REQUESTED || audioStatus === STOP_REQUESTED)
        ) {
            eventType = 'Play';
            onChangeAudioStatus(PLAY_REQUESTED);
        } else if (currentTrackId !== tuid) {
            eventType = 'Play';
            setLoading(true);
            onChangeCurrentTrack(tuid, Number(trackNumber));
            onChangeAudioStatus(START_REQUESTED);
        }

        trackContentReviewEventMerged(
            'Click',
            `${eventType} Audio`,
            null,
            product,
            null,
            product.isRevision
        );
    };

    const showAudioPlayer = Boolean(
        currentTrackId === tuid &&
            (audioStatus === PLAY_REQUESTED || audioStatus === START_REQUESTED)
    );

    return (
        <div className="product-track-audio-container">
            <GlyphButton
                data-testid="audio-button"
                name={!loading && showAudioPlayer ? PAUSE : PLAY}
                variant="primary"
                onClick={handleButtonClick}
                className="track-audio-button"
            />
        </div>
    );
};

export default ProductTrackAudioContainer;