import React, { useCallback, useMemo, useState } from 'react'; import FormGroup from 'Components/Form/FormGroup'; import FormInputGroup from 'Components/Form/FormInputGroup'; import FormLabel from 'Components/Form/FormLabel'; import Button from 'Components/Link/Button'; import Modal from 'Components/Modal/Modal'; import ModalBody from 'Components/Modal/ModalBody'; import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import { inputTypes, kinds, sizes } from 'Helpers/Props'; import translate from 'Utilities/String/translate'; import styles from './RemoveQueueItemModal.css'; interface RemovePressProps { removeFromClient: boolean; changeCategory: boolean; blocklist: boolean; skipRedownload: boolean; } interface RemoveQueueItemModalProps { isOpen: boolean; sourceTitle: string; canChangeCategory: boolean; canIgnore: boolean; isPending: boolean; selectedCount?: number; onRemovePress(props: RemovePressProps): void; onModalClose: () => void; } type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore'; type BlocklistMethod = | 'doNotBlocklist' | 'blocklistAndSearch' | 'blocklistOnly'; function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { const { isOpen, sourceTitle, canIgnore, canChangeCategory, isPending, selectedCount, onRemovePress, onModalClose, } = props; const multipleSelected = selectedCount && selectedCount > 1; const [removalMethod, setRemovalMethod] = useState('removeFromClient'); const [blocklistMethod, setBlocklistMethod] = useState('doNotBlocklist'); const { title, message } = useMemo(() => { if (!selectedCount) { return { title: translate('RemoveQueueItem', { sourceTitle }), message: translate('RemoveQueueItemConfirmation', { sourceTitle }), }; } if (selectedCount === 1) { return { title: translate('RemoveSelectedItem'), message: translate('RemoveSelectedItemQueueMessageText'), }; } return { title: translate('RemoveSelectedItems'), message: translate('RemoveSelectedItemsQueueMessageText', { selectedCount, }), }; }, [sourceTitle, selectedCount]); const removalMethodOptions = useMemo(() => { return [ { key: 'removeFromClient', value: translate('RemoveFromDownloadClient'), hint: multipleSelected ? translate('RemoveMultipleFromDownloadClientHint') : translate('RemoveFromDownloadClientHint'), }, { key: 'changeCategory', value: translate('ChangeCategory'), isDisabled: !canChangeCategory, hint: multipleSelected ? translate('ChangeCategoryMultipleHint') : translate('ChangeCategoryHint'), }, { key: 'ignore', value: multipleSelected ? translate('IgnoreDownloads') : translate('IgnoreDownload'), isDisabled: !canIgnore, hint: multipleSelected ? translate('IgnoreDownloadsHint') : translate('IgnoreDownloadHint'), }, ]; }, [canChangeCategory, canIgnore, multipleSelected]); const blocklistMethodOptions = useMemo(() => { return [ { key: 'doNotBlocklist', value: translate('DoNotBlocklist'), hint: translate('DoNotBlocklistHint'), }, { key: 'blocklistAndSearch', value: translate('BlocklistAndSearch'), hint: multipleSelected ? translate('BlocklistAndSearchMultipleHint') : translate('BlocklistAndSearchHint'), }, { key: 'blocklistOnly', value: translate('BlocklistOnly'), hint: multipleSelected ? translate('BlocklistMultipleOnlyHint') : translate('BlocklistOnlyHint'), }, ]; }, [multipleSelected]); const handleRemovalMethodChange = useCallback( ({ value }: { value: RemovalMethod }) => { setRemovalMethod(value); }, [setRemovalMethod] ); const handleBlocklistMethodChange = useCallback( ({ value }: { value: BlocklistMethod }) => { setBlocklistMethod(value); }, [setBlocklistMethod] ); const handleConfirmRemove = useCallback(() => { onRemovePress({ removeFromClient: removalMethod === 'removeFromClient', changeCategory: removalMethod === 'changeCategory', blocklist: blocklistMethod !== 'doNotBlocklist', skipRedownload: blocklistMethod === 'blocklistOnly', }); setRemovalMethod('removeFromClient'); setBlocklistMethod('doNotBlocklist'); }, [ removalMethod, blocklistMethod, setRemovalMethod, setBlocklistMethod, onRemovePress, ]); const handleModalClose = useCallback(() => { setRemovalMethod('removeFromClient'); setBlocklistMethod('doNotBlocklist'); onModalClose(); }, [setRemovalMethod, setBlocklistMethod, onModalClose]); return ( {title}
{message}
{isPending ? null : ( {translate('RemoveQueueItemRemovalMethod')} )} {multipleSelected ? translate('BlocklistReleases') : translate('BlocklistRelease')}
); } export default RemoveQueueItemModal;