Create sorting using select

/**
 * @module components/Sorting
 */
import React from 'react';
import { connectSort } from '@findify/react-connect';
import { compose, withPropsOnChange, setDisplayName, withHandlers, branch, renderNothing } from 'recompose';
import withTheme from 'helpers/withTheme';
import { is, Map } from 'immutable';

import view from 'components/Sorting/view';
import styles from 'components/Sorting/styles.css';

const labels = {
  "default": "Most popular",
  "price|desc": "Highest price",
  "price|asc": "Lowest price",
  "created_at|desc": "What's new",
};

export default compose(
  setDisplayName('Sorting'),
  withTheme(styles),
  connectSort,
  withPropsOnChange(['config'], ({ config, selected }) => {
    const items = config.getIn(['sorting', 'options']).map(i => 
        i.set('label',
          labels[[i.get('field'), i.get('order')].filter(i => i).join('|')]
        )
    )

    return { items }
  }),
  withPropsOnChange(['selected'], ({ items, selected }) => ({
    selectedItem: selected && items && items.find(i =>
      is(i.get('order'), selected.get('order')) &&
      is(i.get('field'), selected.get('field'))
    )
  })),
  withHandlers({
    onChangeSort: ({ onChangeSort }) => item => onChangeSort(item.field, item.order)
  }),

  branch(
    ({ items }) => !items,
    renderNothing
  )
)(view);

/**
 * @module components/Sorting
 */

import React from 'react';
import Icon from 'components/Icon';
import Text from 'components/Text';
import Dropdown from 'components/Dropdown';
import MapArray from 'components/common/MapArray';
import { MJSConfiguration, ISortingItem, ThemedSFCProps } from 'types';
import { List } from 'immutable';
import { withHandlers } from 'recompose';

/** List of props Sorting view accepts */
export interface ISortingProps extends ThemedSFCProps {
  /** Callback called when sorting is changed */
  onChangeSort?: (value: any) => void
  /** MJS configuration */
  config: MJSConfiguration;
  /** List of Sorting configurations */
  items: List<ISortingItem>;
  /** Current selected sorting configuration */
  selectedItem: ISortingItem;
}

const enhancer = withHandlers({
  changeSort: () => (onChangeSort, item) => {
    const optionSelectedIndex = document.getElementById('findify-mobile-select').options.selectedIndex;
    const optionSelected = document.getElementById('findify-mobile-select')[optionSelectedIndex].dataset.item;
    onChangeSort(JSON.parse(optionSelected)); 
  }
})

const Option = (({ item, theme, index, selectedItem }) =>
  <option selected={selectedItem && item && item.get('label') === selectedItem.get('label')} data-item={JSON.stringify(item.toJS())} data-index={index}>
    { selectedItem && item.get('label') === selectedItem.get('label') ? selectedItem.get('label') : item.get('label') }
  </option>
)


const Sorting = ({ onChangeSort, config, theme, items, selectedItem, changeSort }: ISortingProps) =>
<div className={theme.root}>
  <Text primary uppercase className={theme.title}>
    Sort
  </Text>
  <select id="findify-mobile-select" onChange={ (e) => { changeSort(onChangeSort) } }>
    <MapArray
      theme={theme}
      array={items}
      factory={Option}
      selectedItem={selectedItem}
    />
  </select>
</div>

export default enhancer(Sorting);