text: import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import ImmutablePropTypes from 'react-immutable-proptypes';
  import styled from '@emotion/styled';
  import { OrderedMap } from 'immutable';
  import { translate } from 'react-polyglot';
  import { connect } from 'react-redux';
  import {
    Dropdown,
    DropdownItem,
    StyledDropdownButton,
    Loader,
    lengths,
    components,
    shadows,
  } from 'netlify-cms-ui-default';
  import { createNewEntry } from 'Actions/collections';
  import {
    loadUnpublishedEntries,
    updateUnpublishedEntryStatus,
    publishUnpublishedEntry,
    deleteUnpublishedEntry,
  } from 'Actions/editorialWorkflow';
  import { selectUnpublishedEntriesByStatus } from 'Reducers';
  import { EDITORIAL_WORKFLOW, status } from 'Constants/publishModes';
  import WorkflowList from './WorkflowList';
  
  const WorkflowContainer = styled.div`
    padding: ${lengths.pageMargin} 0;
    height: 100vh;
  `;
  
  const WorkflowTop = styled.div`
    ${components.cardTop};
  `;
  
  const WorkflowTopRow = styled.div`
    display: flex;
    justify-content: space-between;
  
    span[role='button'] {
      ${shadows.dropDeep};
    }
  `;
  
  const WorkflowTopHeading = styled.h1`
    ${components.cardTopHeading};
  `;
  
  const WorkflowTopDescription = styled.p`
    ${components.cardTopDescription};
  `;
  
  class Workflow extends Component {
    static propTypes = {
      collections: ImmutablePropTypes.orderedMap.isRequired,
      isEditorialWorkflow: PropTypes.bool.isRequired,
      isOpenAuthoring: PropTypes.bool,
      isFetching: PropTypes.bool,
      unpublishedEntries: ImmutablePropTypes.map,
      loadUnpublishedEntries: PropTypes.func.isRequired,
      updateUnpublishedEntryStatus: PropTypes.func.isRequired,
      publishUnpublishedEntry: PropTypes.func.isRequired,
      deleteUnpublishedEntry: PropTypes.func.isRequired,
      t: PropTypes.func.isRequired,
    };
  
    componentDidMount() {
      const { loadUnpublishedEntries, isEditorialWorkflow, collections } = this.props;
      if (isEditorialWorkflow) {
        loadUnpublishedEntries(collections);
      }
    }
  
    render() {
      const {
        isEditorialWorkflow,
        isOpenAuthoring,
        isFetching,
        unpublishedEntries,
        updateUnpublishedEntryStatus,
        publishUnpublishedEntry,
        deleteUnpublishedEntry,
        collections,
        t,
      } = this.props;
  
      if (!isEditorialWorkflow) return null;
      if (isFetching) return <Loader active>{t('workflow.workflow.loading')}</Loader>;
      const reviewCount = unpublishedEntries.get('pending_review').size;
      const readyCount = unpublishedEntries.get('pending_publish').size;
  
      return (
        <WorkflowContainer>
          <WorkflowTop>
            <WorkflowTopRow>
              <WorkflowTopHeading>{t('workflow.workflow.workflowHeading')}</WorkflowTopHeading>
              <Dropdown
                dropdownWidth="160px"
                dropdownPosition="left"
                dropdownTopOverlap="40px"
                renderButton={() => (
                  <StyledDropdownButton>{t('workflow.workflow.newPost')}</StyledDropdownButton>
                )}
              >
                {collections
                  .filter(collection => collection.get('create'))
                  .toList()
                  .map(collection => (
                    <DropdownItem
                      key={collection.get('name')}
                      label={collection.get('label')}
                      onClick={() => createNewEntry(collection.get('name'))}
                    />
                  ))}
              </Dropdown>
            </WorkflowTopRow>
            <WorkflowTopDescription>
              {t('workflow.workflow.description', {
                smart_count: reviewCount,
                readyCount,
              })}
            </WorkflowTopDescription>
          </WorkflowTop>
          <WorkflowList
            entries={unpublishedEntries}
            handleChangeStatus={updateUnpublishedEntryStatus}
            handlePublish={publishUnpublishedEntry}
            handleDelete={deleteUnpublishedEntry}
            isOpenAuthoring={isOpenAuthoring}
            collections={collections}
          />
        </WorkflowContainer>
      );
    }
  }
  
  function mapStateToProps(state) {
    const { collections, config, globalUI } = state;
    const isEditorialWorkflow = config.get('publish_mode') === EDITORIAL_WORKFLOW;
    const isOpenAuthoring = globalUI.get('useOpenAuthoring', false);
    const returnObj = { collections, isEditorialWorkflow, isOpenAuthoring };
  
    if (isEditorialWorkflow) {
      returnObj.isFetching = state.editorialWorkflow.getIn(['pages', 'isFetching'], false);
  
      /*
       * Generates an ordered Map of the available status as keys.
       * Each key containing a Sequence of available unpubhlished entries
       * Eg.: OrderedMap{'draft':Seq(), 'pending_review':Seq(), 'pending_publish':Seq()}
       */
      returnObj.unpublishedEntries = status.reduce((acc, currStatus) => {
        const entries = selectUnpublishedEntriesByStatus(state, currStatus);
        return acc.set(currStatus, entries);
      }, OrderedMap());
    }
    return returnObj;
  }
  
  export default connect(mapStateToProps, {
    loadUnpublishedEntries,
    updateUnpublishedEntryStatus,
    publishUnpublishedEntry,
    deleteUnpublishedEntry,
  })(translate()(Workflow));
  