content: import React from 'react';
  import {graphql, compose} from 'react-apollo';
  import IconButton from '../../../../components/IconButton'
  import {ChevronRight, Hierarchy, Facets, Hash, Export, TextInput, Magnifier, Plus, Filter, ChevronDown, ChevronLeft, Square, FileUpload, Times, Image, Book} from '../../../../components/SvgIcon';
  import List, { ListItem, ListItemIcon, ListItemSecondaryActionStart, ListItemSecondaryAction, ListItemText } from '../../../../components/List'
  import Checkbox from '../../../../components/Checkbox';
  import FILES_LIST from '../../../../queries/fetchFilesList';
  import ADD_FILE from '../../../../mutations/AddFile';
  import Snackbar from '../../../../components/Snackbar'
  import Button from '../../../../components/Button'
  import Avatar from '../../../../components/Avatar'
  import StateGlobal from '../../../../hoc/StateGlobal'
  import ActionsPopup from './ActionsPopup'
  
  @graphql(FILES_LIST, {name: 'FilesList'})
  @graphql(ADD_FILE, {name: 'AddFileMutation'})
  @StateGlobal
  class FilesManager extends React.Component {
    state = {
        fileData:[]
      };
  
  
    handleToggle = value => () => {
      const { checked } = this.state;
      const currentIndex = checked.indexOf(value);
      const newChecked = [...checked];
  
      if (currentIndex === -1) {
        newChecked.push(value);
      } else {
        newChecked.splice(currentIndex, 1);
      }
  
      this.setState({
        checked: newChecked,
      });
    };
  
    render(){
      const {
        stateGlobalQuery:{
          openPopup,
        },
        FilesList:{filesList, loading}
      } = this.props;
      let type = ['image', 'epub'].map(type=>{
        return ('image/jpeg').match(new RegExp(type, "g"));
      }).filter(x => !!x)[0]
      console.log(type[0]);
      const { vertical, horizontal, open, fileData } = this.state;
  
        if (loading) {return <div>Loading ...</div>;}
  
        return(
          <React.Fragment>
          <div className="py-3">
            <div className="nav">
              <div className="nav-item">
                <IconButton aria-label="Zoom" color="primary" to={{pathname:`/private/entity-edit`}}>
                  <Magnifier/>
                </IconButton>
              </div>
              <div className="nav-item">
                <input
                  style={{display: 'none'}}
                  id="icon-button-file"
                  type="file" multiple
                  onChange={({ target: { validity, files } })=> {
                    if(validity.valid){
                      var formData = new FormData();
                      for (var x = 0; x < files.length; x++){
                        formData.append("files", files[x]);
                      }
  // stream progress: https://github.com/SitePen/javascript-streams-blog-examples/blob/master/streaming-fetch/main.js
  // https://www.sitepen.com/blog/2017/10/02/a-guide-to-faster-web-app-io-and-data-operations-with-streams/
                      fetch('/uploads',{
                        method: 'POST',
                        body:formData
                      }).then(res =>{
                        if (res.status !== 200) {
                          console.log('Looks like there was a problem. Status Code: ' +
                            res.status);
                          return;
                        }
  
                        // this.consume(res.body.getReader())
  
                        res.json().then(data =>{
                          console.log(data);
                          this.setState({ fileData: data });
  
                          this.props.AddFileMutation({
                            variables: { fileData: data },
                          }).then(upload =>{
                            console.log(upload);
                          })
                        })
                      }).catch((error) => {
                          console.warn(error);
                      });
                    }
                  }}
                  />
                <label htmlFor="icon-button-file">
                  <IconButton aria-label="FileUpload" color="primary" component="span">
                    <FileUpload/>
                  </IconButton>
                </label>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <List>
                {filesList.map((item , index)=>(
                  <ListItem
                    key={index}>
                    <Avatar className="mr-3">
                      <Book />
                    </Avatar>
                    <ListItemText primary={item.fileName} />
                    <ListItemSecondaryAction>
                      <ActionsPopup
                          open={openPopup == `file${item.id}`}
                          item={{
                            slug:`file${item.id}`,
                            catalogHidden:1,
                            id:item.id,
                            type: `file`
                          }}
                        />
                    </ListItemSecondaryAction>
                  </ListItem>
                ))}
              </List>
            </div>
          </div>
  
          <Snackbar
            anchorOrigin={{ vertical, horizontal }}
            open={open}
            onClose={this.handleClose}
            SnackbarContentProps={{
              'aria-describedby': 'message-id',
            }}
            message={[
              <span id="message-id" key={0}>Загрузка файлов</span>,
              <List key={1}>
                {fileData.map((file, index)=>(
                  file.originalname ? (
                    <ListItem
                      key={index}>
                      {file.originalname}
                    </ListItem>
                  ) : (
                    <ListItem
                      key={index}>
                      {file.error}
                    </ListItem>
                  )
                ))}
              </List>
            ]}
            action={[
              <IconButton
                key="close"
                aria-label="Close"
                color="inherit"
                onClick={this.handleClose}
              >
                <Times />
              </IconButton>,
            ]}
          />
        </React.Fragment>)
  
    }
  
  }
  export default FilesManager;
  