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

class AnsibleCollectionDetails extends Component {
  componentDidMount() {
    this.updateAnsibleCollection();
  }

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

  updateAnsibleCollection = () => {
    const ansibleCollectionId = parseInt(this.props.match.params.id, 10);
    this.props.getAnsibleCollectionDetails(ansibleCollectionId);
  };

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

  render() {
    const { ansibleCollectionDetails } = this.props;
    const {
      loading, name, namespace, version,
    } = ansibleCollectionDetails;

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

    return (
      <div>
        {!loading && <BreadcrumbsBar
          onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
          data={{
            isSwitchable: true,
            breadcrumbItems: [
              {
                caption: __('Ansible Collection Details'),
                onClick: () =>
                  this.props.history.push('/ansible_collections'),
              },
              {
                caption: `${name}-${namespace}-${version}`,
              },
            ],
            resource,
          }}
        />}
        <ContentDetails
          contentDetails={ansibleCollectionDetails}
          schema={ansibleCollectionsSchema(ansibleCollectionDetails)}
        />
      </div>
    );
  }
}

AnsibleCollectionDetails.propTypes = {
  getAnsibleCollectionDetails: 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,
  ansibleCollectionDetails: PropTypes.shape({
    loading: PropTypes.bool,
    name: PropTypes.string,
    namespace: PropTypes.string,
    version: PropTypes.string,
    // Disabling rule as existing code failed due to an eslint-plugin-react update
    /* eslint-disable react/forbid-prop-types */
    repositories: PropTypes.array,
    tags: PropTypes.array,
    /* eslint-enable react/forbid-prop-types */
  }).isRequired,
};

export default AnsibleCollectionDetails;