import React from 'react';
import { connect } from 'plugin-api/beta/client/hocs';
import { bindActionCreators } from 'redux';
import {
  sortOrderSelector,
  sortBySelector,
} from 'plugin-api/beta/client/selectors/stream';
import { setSort } from 'plugin-api/beta/client/actions/stream';
import hoistStatics from 'recompose/hoistStatics';
import { closeMenu } from 'plugins/talk-plugin-viewing-options/client/actions';

const mapStateToProps = state => ({
  sortOrder: sortOrderSelector(state),
  sortBy: sortBySelector(state),
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      setSort,
      closeMenu,
    },
    dispatch
  );

/**
 * A HOC providing props to implement a sort option.
 * Provides the props `active`, `setSort`, `label`.
 * @param  {Object} sort
 * @param  {Object} sort.sortBy
 * @param  {string} sort.sortOrder
 * @return {Object} HOC
 */
export default ({ sortBy = 'created_at', sortOrder = 'DESC', label }) =>
  hoistStatics(WrappedComponent => {
    class WithSortOption extends React.Component {
      setSort = () => {
        this.props.closeMenu();
        this.props.setSort({ sortBy, sortOrder });
      };

      render() {
        const active =
          this.props.sortOrder === sortOrder && this.props.sortBy === sortBy;
        const resolvedLabel = typeof label === 'function' ? label() : label;
        return (
          <WrappedComponent
            active={active}
            setSort={this.setSort}
            label={resolvedLabel}
          />
        );
      }
    }
    return connect(
      mapStateToProps,
      mapDispatchToProps
    )(WithSortOption);
  });