import { MultiSelect } from '@theorchard/suite-components';
import React from 'react';
import { useIsYouTubeFingerprintRulesEnabled } from 'shared/features';
import type { FC } from 'react';

const CLASS_NAME = 'ServicesMultiSelect';

export const defaultServiceValue = {
    label: 'TikTok',
    value: 'tiktok',
};

const DropdownOptions: Option[] = [
    { label: 'TikTok', value: 'tiktok' },
    { label: 'YouTube', value: 'youtube' },
];

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

interface Props {
    onApply: (items: string[]) => void;
}

const ServicesMultiSelect: FC<Props> = ({ onApply }) => {
    const isYouTubeFingerprintRulesEnabled =
        useIsYouTubeFingerprintRulesEnabled();
    let selected: string[] = [];

    const handleChange = (items: Option[]) => {
        selected = items.map(i => i.value);
    };

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

    return (
        <MultiSelect
            testId="services-dropdown"
            className={CLASS_NAME}
            menuMinWidth="auto"
            menuWidth="100%"
            showExcludeMode
            excludeMode
            selectedValue={
                !isYouTubeFingerprintRulesEnabled
                    ? [defaultServiceValue]
                    : undefined
            }
            disabled={!isYouTubeFingerprintRulesEnabled}
            options={
                !isYouTubeFingerprintRulesEnabled
                    ? [defaultServiceValue]
                    : DropdownOptions
            }
            onChange={handleChange}
            onApply={handleApply}
            requireApply
            excludeModeText={$t(
                'fingerprintRestrictions.addFingerprintRestriction.sidecar.excludeModeText'
            )}
        />
    );
};

export default ServicesMultiSelect;