import type { FC } from 'react';
import React from 'react';
import { Col, Row } from '@theorchard/suite-components';
import { useAudioInfringementModalContext } from 'src/components/audioInfringementModalProvider/audioInfringementModalProvider';
import type {
    CrossAccountOsrConflictValidationMatch,
    PotentialAudioInfringementValidationMatch,
    TrackFieldValidationExtra,
    ValidationExtra,
} from 'src/types';

export const CLASS_NAME = 'PotentialAudioInfringement';
const INTL_PREFIX = 'contentReview.potentialAudioInfringement';

export interface Props {
    potentialAudioInfringementMatches: PotentialAudioInfringementValidationMatch[];
    crossAccountOSRConflictMatches: CrossAccountOsrConflictValidationMatch[];
    validationExtra?: ValidationExtra;
}

const PotentialAudioInfringement: FC<Props> = ({
    potentialAudioInfringementMatches,
    crossAccountOSRConflictMatches,
    validationExtra,
}) => {
    const { dispatch } = useAudioInfringementModalContext();
    const trackMetadata: TrackFieldValidationExtra =
        validationExtra as TrackFieldValidationExtra;

    const numberOfMatches =
        potentialAudioInfringementMatches.length +
        crossAccountOSRConflictMatches.length;

    const openModal = () => {
        dispatch({
            data: {
                potentialAudioInfringementMatches,
                crossAccountOSRConflictMatches,
                trackMetadata,
            },
        });
    };

    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <Row>
                <Col className="mb-3">
                    {$t(`${INTL_PREFIX}.validationMessage`)}
                </Col>
            </Row>
            <Row>
                <Col className="all-matches-count" onClick={openModal}>
                    {$t(`${INTL_PREFIX}.seeAllMatches`, {
                        count: numberOfMatches,
                    })}
                </Col>
            </Row>
        </div>
    );
};
export default PotentialAudioInfringement;