import React, { Component } from "react";
import { Col, Row, Container } from "reactstrap";
import { withApollo } from "react-apollo";
import { Asset } from "../../../../helpers/assets";
const assetList = [
  {
    name: "Mesh",
    fullPath: "/3D/Mesh/Simulator",
    folderPath: "/3D/Mesh"
  },
  {
    name: "Texture",
    fullPath: "/3D/Texture/Simulator",
    folderPath: "/3D/Texture"
  },
  {
    name: "Right",
    fullPath: "/Ship Views/Right",
    folderPath: "/Ship Views"
  },
  {
    name: "Top",
    fullPath: "/Ship Views/Top",
    folderPath: "/Ship Views"
  },
  {
    name: "Front",
    fullPath: "/Ship Views/Front",
    folderPath: "/Ship Views"
  },
  {
    name: "Back",
    fullPath: "/Ship Views/Back",
    folderPath: "/Ship Views"
  },
  {
    name: "Left",
    fullPath: "/Ship Views/Left",
    folderPath: "/Ship Views"
  },
  {
    name: "Login Logo",
    fullPath: "/Misc/Login Logo",
    folderPath: "/Misc"
  }
];

const Assets = ({ selectedSimulator: sim }) => {
  return (
    <Container className="assets">
      <p>Assets</p>
      <Row style={{ overflowY: "scroll", height: "80vh" }}>
        {assetList.map(a => (
          <Asset key={a.fullPath} asset={a.fullPath} simulatorId={sim.id}>
            {({ src }) => <WrappedAssetDropdown src={src} sim={sim} {...a} />}
          </Asset>
        ))}
      </Row>
    </Container>
  );
};

export default Assets;

class AssetDropzone extends Component {
  state = {};
  onDrop = evt => {
    const { folderPath, name, sim } = this.props;
    const data = new FormData();
    data.append("simulatorId", sim.id);
    data.append("containerName", name);
    data.append("folderPath", folderPath);
    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}/upload`,
      {
        method: "POST",
        body: data
      }
    );
  };
  render() {
    const { name, fullPath, src } = this.props;
    return (
      <Col sm={4}>
        <h3>{name}</h3>
        <h4>{fullPath}</h4>
        <input type="file" onChange={this.onDrop} />
        <div>
          {src ? (
            <img
              alt="Asset"
              style={{ width: "100%", maxHeight: "100%" }}
              src={src}
            />
          ) : (
            <p>Drop your file, or click to select files to upload.</p>
          )}
        </div>
      </Col>
    );
  }
}

const WrappedAssetDropdown = withApollo(AssetDropzone);
/*


*/

@@ -945,20 +945,20 @@
 ;%0A%0Ac
-onst
+lass
  Assets 
 = (%7B
@@ -957,11 +957,51 @@
 ets 
-= (
+extends Component %7B%0A  render() %7B%0A    const 
 %7B se
@@ -1026,15 +1026,25 @@
 im %7D
-)
  =
-%3E %7B%0A
+ this.props;%0A  
   re
@@ -1046,24 +1046,26 @@
    return (%0A
+  
     %3CContain
@@ -1093,16 +1093,18 @@
 %3E%0A      
+  
 %3Cp%3EAsset
@@ -1105,24 +1105,26 @@
 %3EAssets%3C/p%3E%0A
+  
       %3CRow s
@@ -1179,16 +1179,18 @@
         
+ 
+ 
 %7BassetLi
@@ -1217,14 +1217,30 @@
     
+  
 %3CAsset
+%0A             
  key
@@ -1252,16 +1252,49 @@
 ullPath%7D
+%0A              fail%0A             
  asset=%7B
@@ -1304,16 +1304,30 @@
 ullPath%7D
+%0A             
  simulat
@@ -1339,18 +1339,33 @@
 %7Bsim.id%7D
-%3E
 %0A
+            %3E%0A  
         
@@ -1381,16 +1381,34 @@
 rc %7D) =%3E
+ (%0A               
  %3CWrappe
@@ -1425,40 +1425,180 @@
 down
- src=%7Bsrc%7D sim=%7Bsim%7D %7B...a%7D /%3E%7D%0A
+%0A                  src=%7Bsrc%7D%0A                  sim=%7Bsim%7D%0A                  %7B...a%7D%0A                  update=%7B() =%3E this.forceUpdate()%7D%0A                /%3E%0A              )%7D%0A  
     
@@ -1620,16 +1620,18 @@
         
+  
 ))%7D%0A    
@@ -1636,15 +1636,19 @@
     
+ 
+ 
 %3C/Row%3E%0A
+  
     
@@ -1664,15 +1664,20 @@
 er%3E%0A
+  
   );%0A
+  %7D%0A
 %7D
-;
 %0A%0Aex
@@ -1801,24 +1801,32 @@
 h, name, sim
+, update
  %7D = this.pr
@@ -2297,24 +2297,60 @@
       %7D%0A    
+).then(() =%3E %7B%0A      update();%0A    %7D
 );%0A  %7D;%0A  re
@@ -2692,32 +2692,51 @@
         src=%7Bsrc
+ + %60?$%7BDate.now()%7D%60
 %7D%0A            /%3E
@@ -2771,28 +2771,9 @@
  %3Cp%3E
-Drop your file, or c
+C
 lick

Make assets auto-update when you upload them for the simulator.