import React, { Component } from 'react';
import BreadcrumbsBar from 'foremanReact/components/BreadcrumbBar';
import { translate as __ } from 'foremanReact/common/I18n';
import { PropTypes } from 'prop-types';
import api from '../../../services/api';
import ContentDetails from '../../../components/Content/Details/ContentDetails';
import moduleDetailsSchema from './ModuleDetailsSchema';

class ModuleStreamDetails extends Component {
  componentDidMount() {
    this.updateModuleStream();
  }

  componentDidUpdate(prevProps) {
    const { match: { params: prevRouterParams } } = this.props;
    const { match: { params: currentRouterParams } } = prevProps;
    if (prevRouterParams.id && (prevRouterParams.id !== currentRouterParams.id)) {
      this.updateModuleStream();
    }
  }

  updateModuleStream = () => {
    const moduleStreamId = parseInt(this.props.match.params.id, 10);
    this.props.loadModuleStreamDetails(moduleStreamId);
  };

  handleBreadcrumbSwitcherItem = (e, url) => {
    this.props.history.push(url);
    e.preventDefault();
  };

  render() {
    const { moduleStreamDetails } = this.props;
    const {
      loading, name, stream,
    } = moduleStreamDetails;

    const resource = {
      nameField: 'name',
      resourceUrl: api.getApiUrl('/module_streams'),
      switcherItemUrl: '/module_streams/:id',
    };

    return (
      <div>
        {!loading && <BreadcrumbsBar
          isLoadingResources={loading}
          onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
          isSwitchable
          breadcrumbItems={[
            {
              caption: __('Module Streams'),
              onClick: () =>
                this.props.history.push('/module_streams'),
            },
            {
              caption: `${name} ${stream}`,
            },
          ]}
          resource={resource}
        />}
        <ContentDetails
          contentDetails={moduleStreamDetails}
          schema={moduleDetailsSchema(moduleStreamDetails)}
        />
      </div>
    );
  }
}

ModuleStreamDetails.propTypes = {
  loadModuleStreamDetails: PropTypes.func.isRequired,
  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
  location: PropTypes.shape({}).isRequired,
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired,
    }).isRequired,
  }).isRequired,
  moduleStreamDetails: PropTypes.shape({
    loading: PropTypes.bool,
    name: PropTypes.string,
    // Disabling rule as existing code failed due to an eslint-plugin-react update
    /* eslint-disable react/forbid-prop-types */
    profiles: PropTypes.array,
    repositories: PropTypes.array,
    artifacts: PropTypes.array,
    /* eslint-enable react/forbid-prop-types */
    stream: PropTypes.string,
  }).isRequired,
};

export default ModuleStreamDetails;