import React from 'react';
import { Form, Select } from '@theorchard/suite-components';
import type { TrackMetadata } from 'src/product/track';

interface ReasonOption {
    value: string;
    label: string;
}

interface IndividualTrackFormProps {
    track: TrackMetadata;
    reasonOptions: ReasonOption[];
    onReasonChange: (tuid: string, cannedResponseId: string) => void;
    selectedReason: string | null;
}

const CLASS_NAME = 'IndividualTrackForm';
const TEST_PREFIX = 'track-approval-form';
const INTL_PREFIX = 'contentReview.productModalApprovalSidecarV2';

const IndividualTrackForm = ({
    track,
    reasonOptions,
    onReasonChange,
    selectedReason,
}: IndividualTrackFormProps) => {
    const handleReasonChange = (option?: ReasonOption) => {
        const cannedResponseId = option?.value ?? '';
        onReasonChange(track.tuid.toString(), cannedResponseId);
    };

    return (
        <Form.Group
            key={track.tuid}
            data-testid={`${TEST_PREFIX}-group-${track.tuid}`}
            className={`${CLASS_NAME}-tracks-form-group`}
        >
            <Form.Label className={`${CLASS_NAME}-tracks-name`}>
                {$t(`${INTL_PREFIX}.track`)} {track.trackNumber.currentValue}:{' '}
                {track.trackName.currentValue}
            </Form.Label>
            <Form.Label className={`${CLASS_NAME}-tracks-approval-reason`}>
                {$t(`${INTL_PREFIX}.potentialAudioInfringement`)}
            </Form.Label>

            <Select
                testId={`${TEST_PREFIX}-reason-${track.tuid}`}
                options={reasonOptions}
                placeholder={$t(`${INTL_PREFIX}.selectApprovalReason`)}
                selectedValue={selectedReason ?? ''}
                onChange={handleReasonChange}
            />
        </Form.Group>
    );
};

export default IndividualTrackForm;