text: import { Main } from '@redhat-cloud-services/frontend-components/Main';
  import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
  import propTypes from 'prop-types';
  import React from 'react';
  import { connect } from 'react-redux';
  import { withRouter } from 'react-router-dom';
  import { fetchSystemDetails, optOutSystemAction } from '../../../Store/Actions/Actions';
  import { systemDetailsPageStore } from '../../../Store/Reducers/SystemDetailsPageStore';
  import ReducerRegistry from '../../../Utilities/ReducerRegistry';
  import Header from '../../PresentationalComponents/Header/Header';
  import { injectIntl } from 'react-intl';
  import { PATHS } from '../../../Helpers/constants';
  import messages from '../../../Messages';
  
  import { AppInfo, DetailWrapper, InventoryDetailHead } from '@redhat-cloud-services/frontend-components/Inventory';
  
  class InventoryDetail extends React.Component {
      static propTypes = {
          fetchSystemDetails: propTypes.func,
          systemDetails: propTypes.object,
          optOutSystem: propTypes.func,
          match: propTypes.object,
          addNotification: propTypes.func,
          intl: propTypes.any,
          errors: propTypes.object
      };
  
      constructor(props) {
          super(props);
  
          this.state = {
              inventoryId: this.props.match.params.inventoryId
          };
      }
  
      componentDidMount() {
          this.props.fetchSystemDetails(this.state.inventoryId);
      }
  
      optOutSystem = value => {
          this.props.optOutSystem(this.state.inventoryId, value).then(() => {
              this.props.fetchSystemDetails(this.state.inventoryId);
              value === true
                  ? this.props.addNotification({
                      variant: 'success',
                      title: this.props.intl.formatMessage(messages.inventoryOptOutSuccess)
                  })
                  : this.props.addNotification({
                      variant: 'success',
                      title: this.props.intl.formatMessage(messages.inventoryResumeAnalysisTitle),
                      description: this.props.intl.formatMessage(messages.inventoryResumeAnalysisDescription)
                  });
          });
      };
  
      render() {
          const { systemDetails = {}, errors } = this.props;
          const { opt_out: isOptOut = false, entity, loaded } = systemDetails;
          return (
              <React.Fragment>
                  <DetailWrapper>
                      <Header
                          title=""
                          breadcrumbs={[
                              {
                                  title: PATHS.systemsPage.title,
                                  to: PATHS.systemsPage.to,
                                  loaded: true
                              },
                              {
                                  title: entity?.display_name || this.props.intl.formatMessage(messages.invalidSystem),
                                  isActive: true,
                                  loaded
                              }
                          ]}
                      >
                          {!errors && (
                              <InventoryDetailHead
                                  onLoad={({ mergeWithEntities, mergeWithDetail, INVENTORY_ACTION_TYPES }) => {
                                      ReducerRegistry.register({
                                          ...mergeWithEntities(),
                                          ...mergeWithDetail(systemDetailsPageStore(INVENTORY_ACTION_TYPES, this.optOutSystem))
                                      });
                                  }}
                                  hideBack
                                  actions={
                                      entity && [
                                          isOptOut
                                              ? {
                                                  title: this.props.intl.formatMessage(messages.inventoryKebabOptionsResume),
                                                  onClick: () => this.optOutSystem(false)
                                              }
                                              : {
                                                  title: this.props.intl.formatMessage(messages.inventoryKebabOptionsExclude),
                                                  onClick: () => this.optOutSystem(true)
                                              }
                                      ]
                                  }
                              />
                          )}
                      </Header>
  
                      {(
                          <Main>
                              <React.Fragment>
                                  <AppInfo optOutSystemHandler={this.optOutSystem} />
                              </React.Fragment>
                          </Main>
                      )}
                  </DetailWrapper>
              </React.Fragment>
          );
      }
  
  }
  
  function mapStateToProps(state) {
      return {
          errors: state.SystemCvesStore.cveList.payload.errors,
          systemDetails: state.entityDetails
      };
  }
  
  const mapDispatchToProps = dispatch => {
      return {
          optOutSystem: (system, status) => dispatch(optOutSystemAction(system, status)),
          fetchSystemDetails: system => dispatch(fetchSystemDetails(system)),
          addNotification: notification => dispatch(addNotification(notification))
      };
  };
  
  export default withRouter(
      injectIntl(
          connect(
              mapStateToProps,
              mapDispatchToProps
          )(InventoryDetail)
      )
  );
  