import { MultiSelect } from '@theorchard/suite-components';
import React from 'react';
import type { FC } from 'react';
import type { Track } from 'src/types';

const CLASS_NAME = 'TracksMultiSelect';

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

interface Props {
    tracks: Track[];
    loading: boolean;
    onApply: (items: Track[]) => void;
}

const TracksMultiSelect: FC<Props> = ({ tracks, loading, onApply }) => {
    const selected: Track[] = [];

    const options =
        tracks.map(item => ({
            label: item.trackName || '',
            value: item.tuid,
        })) || [];

    const handleApply = () => onApply(selected);

    const handleChange = (values: Option[]) => {
        values.forEach(v => {
            const t = tracks.find(t => t.tuid === v.value);
            if (t) selected.push(t);
        });
    };

    return (
        <MultiSelect
            className={CLASS_NAME}
            testId="track-dropdown"
            placeholder={$t(
                'fingerprintRestrictions.addFingerprintRestriction.sidecar.tracksPlaceholder'
            )}
            options={options}
            disabled={loading}
            requireApply
            onApply={handleApply}
            onChange={handleChange}
        />
    );
};

export default TracksMultiSelect;