import React from "react";
import FileExplorer from "../TacticalMap/fileExplorer";
import { Row, Col, FormGroup, Label, Input, FormText } from "reactstrap";
import Tour from "reactour";

const Assets = props => {
  const trainingSteps = () => {
    return [
      {
        selector: ".nothing",
        content: (
          <span>
            Assets are image, 3D models, sounds, videos, and any other files
            which can be used in Thorium. Assets are arranged by use in a
            file-like structure.
          </span>
        )
      },
      {
        selector: ".import",
        content: <span>Asset files can be imported from .aset files.</span>
      },
      {
        selector: ".file-explorer-container",
        content: (
          <span>
            This file explorer can be used to browse, upload, and remove assets.
          </span>
        )
      }
    ];
  };
  const importAssets = evt => {
    if (evt.target.files[0]) {
      const data = new FormData();
      Array.from(evt.target.files).forEach((f, index) =>
        data.append(`files[${index}]`, f)
      );
      fetch(
        `${window.location.protocol}//${window.location.hostname}:${parseInt(
          window.location.port,
          10
        ) + 1}/importAssets`,
        {
          method: "POST",
          body: data
        }
      ).then(() => {
        window.location.reload();
      });
    }
  };
  return (
    <Row>
      <Col sm={8} style={{ height: "80vh" }}>
        <FormGroup className="import">
          <Label for="importFile">Import Assets</Label>
          <Input
            type="file"
            name="file"
            id="importFile"
            onChange={importAssets}
          />
          <FormText color="muted">
            Asset files will be in a ".aset" format.
          </FormText>
        </FormGroup>
        <div className="file-explorer-container">
          <FileExplorer
            config
            directory="/"
            selectedFiles={[]}
            onClick={(e, container) => {}}
            admin
          />
        </div>
      </Col>
      <Tour
        steps={trainingSteps()}
        isOpen={props.training}
        onRequestClose={props.stopTraining}
      />
    </Row>
  );
};

export default Assets;

@@ -5,16 +5,30 @@
 rt React
+, %7B Fragment %7D
  from %22r
@@ -1436,65 +1436,24 @@
    %3C
-Row%3E%0A      %3CCol sm=%7B8%7D style=%7B%7B height: %2280vh%22 %7D%7D
+Fragment
 %3E%0A      
   %3CF
@@ -1444,26 +1444,24 @@
 ment%3E%0A      
-  
 %3CFormGroup c
@@ -1479,18 +1479,16 @@
 mport%22%3E%0A
-  
         
@@ -1545,19 +1545,15 @@
     
-  
 %3CInput%0A
-  
     
@@ -1580,18 +1580,16 @@
         
-  
 name=%22fi
@@ -1584,34 +1584,32 @@
     name=%22file%22%0A
-  
           id=%22im
@@ -1628,18 +1628,16 @@
         
-  
 onChange
@@ -1652,18 +1652,16 @@
 Assets%7D%0A
-  
         
@@ -1667,26 +1667,24 @@
  /%3E%0A        
-  
 %3CFormText co
@@ -1696,18 +1696,16 @@
 muted%22%3E%0A
-  
         
@@ -1751,26 +1751,24 @@
 at.%0A        
- 
- 
 %3C/FormText%3E%0A
@@ -1767,18 +1767,16 @@
 rmText%3E%0A
-  
       %3C/
@@ -1792,18 +1792,16 @@
 %3E%0A      
- 
- 
 %3Cdiv cla
@@ -1832,20 +1832,45 @@
 ntainer%22
+ style=%7B%7B height: %2270vh%22 %7D%7D
 %3E%0A
-  
         
@@ -1893,18 +1893,16 @@
         
-  
 config%0A 
@@ -1910,18 +1910,16 @@
         
- 
- 
 director
@@ -1924,18 +1924,16 @@
 ory=%22/%22%0A
-  
         
@@ -1963,18 +1963,16 @@
         
- 
- 
 onClick=
@@ -2004,18 +2004,16 @@
         
-  
 admin%0A  
@@ -2014,31 +2014,27 @@
 min%0A        
- 
- 
 /%3E%0A
-  
       %3C/div%3E
@@ -2038,21 +2038,8 @@
 iv%3E%0A
-      %3C/Col%3E%0A
     
@@ -2169,19 +2169,24 @@
 %3E%0A    %3C/
-Row
+Fragment
 %3E%0A  );%0A%7D

Improve admin assets config scrolling. Closes #875