import React from 'react';
import { Grid, Row, Col } from 'patternfly-react';
import { lowerCase } from 'lodash';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';

import AvailableRolesList from './components/AvailableRolesList';
import AssignedRolesList from './components/AssignedRolesList';
import AnsibleRolesSwitcherError from './components/AnsibleRolesSwitcherError';
import OrderedRolesTooltip from './components/OrderedRolesTooltip';
import { excludeAssignedRolesSearch } from './AnsibleRolesSwitcherHelpers';

class AnsibleRolesSwitcher extends React.Component {
  componentDidMount() {
    const {
      initialAssignedRoles,
      availableRolesUrl,
      inheritedRoleIds,
      resourceId,
      resourceName,
    } = this.props;

    this.props.getAnsibleRoles(
      availableRolesUrl,
      initialAssignedRoles,
      inheritedRoleIds,
      resourceId,
      resourceName,
      { page: 1, perPage: 10 },
      excludeAssignedRolesSearch(initialAssignedRoles)
    );
  }

  render() {
    const {
      loading,
      pagination,
      itemCount,
      addAnsibleRole,
      removeAnsibleRole,
      moveAnsibleRole,
      getAnsibleRoles,
      assignedRoles,
      unassignedRoles,
      toDestroyRoles,
      error,
    } = this.props;

    const {
      availableRolesUrl,
      inheritedRoleIds,
      resourceId,
      resourceName,
    } = this.props;

    const onListingChange = paginationArgs =>
      getAnsibleRoles(
        availableRolesUrl,
        assignedRoles,
        inheritedRoleIds,
        resourceId,
        resourceName,
        paginationArgs,
        excludeAssignedRolesSearch(assignedRoles)
      );

    return (
      <Grid bsClass="container-fluid" id="ansibleRolesSwitcher">
        <Row className="row-eq-height">
          <AnsibleRolesSwitcherError error={error} />
          <Col sm={6} className="available-roles-container">
            <div className="available-roles-header">
              <h2>{__('Available Ansible Roles')}</h2>
            </div>
            <AvailableRolesList
              unassignedRoles={unassignedRoles}
              pagination={pagination}
              itemCount={itemCount}
              onListingChange={onListingChange}
              onAddRole={addAnsibleRole}
              loading={loading}
            />
          </Col>

          <Col sm={6} className="assigned-roles-container">
            <div className="assigned-roles-header">
              <h2>
                <OrderedRolesTooltip />
                {__('Assigned Ansible Roles')}
              </h2>
            </div>
            <AssignedRolesList
              assignedRoles={assignedRoles}
              unassignedRoles={unassignedRoles}
              onRemoveRole={removeAnsibleRole}
              onMoveRole={moveAnsibleRole}
              resourceName={lowerCase(resourceName || '')}
              toDestroyRoles={toDestroyRoles}
            />
          </Col>
        </Row>
      </Grid>
    );
  }
}

AnsibleRolesSwitcher.propTypes = {
  initialAssignedRoles: PropTypes.arrayOf(PropTypes.object),
  availableRolesUrl: PropTypes.string.isRequired,
  inheritedRoleIds: PropTypes.arrayOf(PropTypes.number),
  resourceId: PropTypes.number,
  resourceName: PropTypes.string,
  getAnsibleRoles: PropTypes.func.isRequired,
  loading: PropTypes.bool.isRequired,
  pagination: PropTypes.shape({
    page: PropTypes.number,
    perPage: PropTypes.number,
  }).isRequired,
  itemCount: PropTypes.number.isRequired,
  addAnsibleRole: PropTypes.func.isRequired,
  removeAnsibleRole: PropTypes.func.isRequired,
  moveAnsibleRole: PropTypes.func.isRequired,
  assignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
  toDestroyRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
  unassignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
  error: PropTypes.shape({
    errorMsg: PropTypes.string,
    statusText: PropTypes.string,
  }),
};

AnsibleRolesSwitcher.defaultProps = {
  error: {},
  resourceId: null,
  resourceName: '',
  initialAssignedRoles: [],
  inheritedRoleIds: [],
};

export default AnsibleRolesSwitcher;