import React from 'react'; import { Modal, Stack, Text, Radio, NumberInput, Checkbox, Group, Button, MultiSelect, Divider, } from '@mantine/core'; const CreateChannelModal = ({ opened, onClose, mode, onModeChange, numberValue, onNumberValueChange, rememberChoice, onRememberChoiceChange, onConfirm, // Props for customizing the modal behavior isBulk = false, streamCount = 1, streamName = '', // Channel profile props selectedProfileIds, onProfileIdsChange, channelProfiles = [], }) => { const title = isBulk ? 'Create Channels Options' : 'Create Channel'; const confirmLabel = isBulk ? 'Create Channels' : 'Create Channel'; const numberingLabel = isBulk ? 'Numbering Mode' : 'Number Assignment'; // For bulk: use 'custom' mode, for single: use 'specific' mode const customModeValue = isBulk ? 'custom' : 'specific'; // Convert channel profiles to MultiSelect data format with groups // Filter out the "All" profile (id '0') and add our own special options const profileOptions = [ { group: 'Special', items: [ { value: 'all', label: 'All Profiles' }, { value: 'none', label: 'No Profiles' }, ], }, { group: 'Profiles', items: channelProfiles .filter((profile) => profile.id.toString() !== '0') .map((profile) => ({ value: profile.id.toString(), label: profile.name, })), }, ]; // Handle profile selection with mutual exclusivity const handleProfileChange = (newValue) => { const lastSelected = newValue[newValue.length - 1]; // If 'all' or 'none' was just selected, clear everything else and keep only that if (lastSelected === 'all' || lastSelected === 'none') { onProfileIdsChange([lastSelected]); } // If a specific profile was selected, remove 'all' and 'none' else if (newValue.includes('all') || newValue.includes('none')) { onProfileIdsChange(newValue.filter((v) => v !== 'all' && v !== 'none')); } // Otherwise just update normally else { onProfileIdsChange(newValue); } }; return ( {isBulk ? `Configure options for creating ${streamCount} channels from selected streams:` : `Configure options for creating a channel from "${streamName}":`} {mode === customModeValue && ( )} onRememberChoiceChange(event.currentTarget.checked) } label="Remember this choice and don't ask again" /> ); }; export default CreateChannelModal;