import React, { useState, useEffect } from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { STATUS } from 'foremanReact/constants';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
import {
Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button, Radio, TextArea,
Split, SplitItem, Select, SelectOption,
} from '@patternfly/react-core';
import { addCVFilterRule, createContentViewFilter, getRepositoryTypes } from '../../ContentViewDetailActions';
import { selectCreateContentViewFilter, selectCreateContentViewFilterStatus,
selectCreateContentViewFilterError, selectCreateFilterRule,
selectCreateFilterRuleError, selectCreateFilterRuleStatus,
selectRepoTypes, selectRepoTypesStatus } from '../../../Details/ContentViewDetailSelectors';
import { CONTENT_VIEW_NEEDS_PUBLISH, FILTER_TYPES } from '../../../ContentViewsConstants';
import ContentType from '../ContentType';
const CVFilterAddModal = ({ cvId, onClose }) => {
const [inclusion, setInclusion] = useState(true);
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [type, setType] = useState('rpm');
const [saving, setSaving] = useState(false);
const [typeSelectOpen, setTypeSelectOpen] = useState(false);
const dispatch = useDispatch();
const response = useSelector(state => selectCreateContentViewFilter(state));
const status = useSelector(state => selectCreateContentViewFilterStatus(state));
const error = useSelector(state => selectCreateContentViewFilterError(state));
const ruleResponse = useSelector(state => selectCreateFilterRule(state));
const ruleStatus = useSelector(state => selectCreateFilterRuleStatus(state));
const ruleError = useSelector(state => selectCreateFilterRuleError(state));
const repoTypesResponse = useSelector(state => selectRepoTypes(state));
const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state));
const [redirect, setRedirect] = useState(false);
const [repoTypes, setRepoTypes] = useState([]);
useEffect(() => {
dispatch(getRepositoryTypes());
}, [dispatch]);
const onSubmit = () => {
setSaving(true);
dispatch(createContentViewFilter(
cvId,
{
name, description, inclusion, type,
}, () => dispatch({ type: CONTENT_VIEW_NEEDS_PUBLISH }),
));
};
const onSelect = (event, selection) => {
setType(selection);
setTypeSelectOpen(false);
};
useDeepCompareEffect(() => {
const { id } = response || {};
if (id && status === STATUS.RESOLVED && saving) {
// We need to create an empty rule for Errata by Date type once the Filter is created.
if (type === 'erratum_date') {
dispatch(addCVFilterRule(id, { types: ['security', 'enhancement', 'bugfix'] }));
} else {
setSaving(false);
setRedirect(true);
}
} else if (status === STATUS.ERROR) {
setSaving(false);
}
}, [response, status, error, saving, dispatch, type]);
useDeepCompareEffect(() => {
const { id: filterId } = response || {};
const { id: filterRuleId } = ruleResponse || {};
if (filterId && filterRuleId &&
status === STATUS.RESOLVED && ruleStatus === STATUS.RESOLVED &&
saving) {
setSaving(false);
setRedirect(true);
}
}, [response, status, ruleResponse, ruleStatus, ruleError, saving]);
useDeepCompareEffect(() => {
if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
const allRepoTypes = [];
repoTypesResponse.forEach((repoType) => {
const { name: repoTypeName } = repoType;
allRepoTypes.push(repoTypeName);
});
setRepoTypes(allRepoTypes);
}
}, [repoTypesResponse, repoTypesStatus]);
const filterTypeOptions = () => {
const filterTypeSelectOpions = FILTER_TYPES.map(item =>
);
if (repoTypes.includes('deb')) {
filterTypeSelectOpions.push();
}
return filterTypeSelectOpions;
};
if (redirect) {
const { id } = response;
return ();
}
return (
);
};
CVFilterAddModal.propTypes = {
cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
onClose: PropTypes.func,
};
CVFilterAddModal.defaultProps = {
onClose: null,
};
export default CVFilterAddModal;