/**
 * @module components/search/MobileSorting
 */
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import MapArray from 'components/common/MapArray';
import { is } from 'immutable';
import styles from 'components/search/MobileSorting/styles.css';
import useTranslations from 'helpers/useTranslations';
import useSortingLogic from 'helpers/useSortingLogic';
import { useCallback } from 'react';
const Item = ({ item, theme = styles, selected, onChange, }) => {
    const onClick = useCallback((e) => {
        e.preventDefault();
        onChange(item);
    }, []);
    const isSelected = is(selected, item);
    return (<Button onClick={onClick} disabled={isSelected} className={theme.item}>
      <Text primary uppercase>
        <Icon name={isSelected ? 'RadioFilled' : 'RadioEmpty'} title={isSelected ? 'Selected' : 'Not selected'}/>
        {item.get('label')}
      </Text>
    </Button>);
};
export default ({ theme = styles, style, hideModal }) => {
    const [items, selected, onChange] = useSortingLogic();
    const translate = useTranslations();
    return (<div className={theme.root} style={style}>
      <div className={theme.header}>
        <div className={theme.title}>
          <Text primary uppercase>
            {translate('actions.sorting')}
          </Text>
        </div>

        <Button onClick={hideModal}>
          <Icon name="ArrowBack" title={translate('actions.back')}/>
        </Button>
      </div>

      <div className={theme.body}>
        <MapArray onChange={onChange} theme={theme} selected={selected} array={items} factory={Item}/>
      </div>

      <Button className={theme.footer} onClick={hideModal}>
        {translate('actions.seeResults')}
      </Button>
    </div>);
};