content: import React from 'react';
  import PropTypes from 'prop-types';
  import _ from 'lodash';
  import {
    Button,
    Divider,
    Icon,
    List,
    Segment,
    Progress
  } from 'semantic-ui-react';
  import { withTranslation } from 'react-i18next';
  import { compose, withHandlers } from 'recompose';
  
  import styles from './styles.scss';
  
  
  const LibraryFolders = ({
    openLocalFolderPicker,
    scanLocalFolders,
    onRemoveClick,
    localFolders,
    scanTotal,
    scanProgress,
    loading,
    t
  }) => (
    <Segment className={styles.library_folders}>
      <Segment className={styles.control_bar}>
        <Button
          icon
          inverted
          labelPosition='left'
          className={styles.add_folder}
          onClick={openLocalFolderPicker}
        >
          <Icon name='folder open' />
          {t('add')}
        </Button>
        <Button
          inverted
          icon='refresh'
          disabled={_.isEmpty(localFolders)}
          loading={loading}
          onClick={scanLocalFolders}
          className={styles.refresh_icon}
        />
      </Segment>
      {
        scanTotal &&
        <Progress
          className={styles.progress_bar}
          value={scanProgress}
          total={scanTotal}
          progress='ratio'
        />
      }
      {
        !_.isEmpty(localFolders) &&
        <>
          <Divider />
          <List
            divided
            verticalAlign='middle'
            className={styles.equalizer_list}>
            {localFolders.map((folder, idx) => (
              <List.Item key={idx}>
                <List.Content floated='right'>
                  <Icon
                    name='close'
                    onClick={() => onRemoveClick(folder)}
                    className={styles.folder_remove_icon}
                  />
                </List.Content>
                <List.Content>{folder}</List.Content>
              </List.Item>
            ))}
          </List>
        </>
      }
    </Segment>
  );
  
  LibraryFolders.propTypes = {
    openLocalFolderPicker: PropTypes.func,
    scanLocalFolders: PropTypes.func,
    removeLocalFolder: PropTypes.func,
    localFolders: PropTypes.array,
    loading: PropTypes.bool
  };
  
  export default compose(
    withTranslation('library'),
    withHandlers({
      onRemoveClick: ({removeLocalFolder}) => folder => removeLocalFolder(folder)
    })
  )(LibraryFolders);
  