import { connect, withFragments } from 'plugin-api/beta/client/hocs';
import { bindActionCreators } from 'redux';
import ViewingOptions from '../components/ViewingOptions';
import { openMenu, closeMenu } from '../actions';
import { compose, gql } from 'react-apollo';
import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';

const slots = ['viewingOptionsSort', 'viewingOptionsFilter'];

const mapStateToProps = ({ talkPluginViewingOptions: state }) => ({
  open: state.open,
});

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

const withViewingOptionsFragments = withFragments({
  root: gql`
    fragment TalkViewingOptions_ViewingOptions_root on RootQuery {
      __typename
      ${getSlotFragmentSpreads(slots, 'root')}
    }`,
  asset: gql`
    fragment TalkViewingOptions_ViewingOptions_asset on Asset {
      __typename
      ${getSlotFragmentSpreads(slots, 'asset')}
    }`,
});

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withViewingOptionsFragments
);

export default enhance(ViewingOptions);