// Generated by ReScript, PLEASE EDIT WITH CARE
'use strict';

var Cx = require("rescript-classnames/src/Cx.bs.js");
var Curry = require("rescript/lib/js/curry.js");
var Decco = require("decco/src/Decco.bs.js");
var Icon3 = require("../../Icon3.bs.js");
var React = require("react");
var Js_dict = require("rescript/lib/js/js_dict.js");
var Js_json = require("rescript/lib/js/js_json.js");
var $$Promise = require("@ryyppy/rescript-promise/src/Promise.bs.js");
var Caml_array = require("rescript/lib/js/caml_array.js");
var Belt_Option = require("rescript/lib/js/belt_Option.js");
var ReactDropzone = require("react-dropzone");
var ImportFunctionsJs = require("./importFunctions.js");

function extractPayload_encode(v) {
  return Js_dict.fromArray([
              [
                "sourceColumns",
                Decco.arrayToJson(Decco.stringToJson, v.sourceColumns)
              ],
              [
                "targetColumns",
                Decco.arrayToJson(Decco.stringToJson, v.targetColumns)
              ]
            ]);
}

function extractPayload_decode(v) {
  var dict = Js_json.classify(v);
  if (typeof dict === "number") {
    return Decco.error(undefined, "Not an object", v);
  }
  if (dict.TAG !== /* JSONObject */2) {
    return Decco.error(undefined, "Not an object", v);
  }
  var dict$1 = dict._0;
  var sourceColumns = Decco.arrayFromJson(Decco.stringFromJson, Belt_Option.getWithDefault(Js_dict.get(dict$1, "sourceColumns"), null));
  if (sourceColumns.TAG === /* Ok */0) {
    var targetColumns = Decco.arrayFromJson(Decco.stringFromJson, Belt_Option.getWithDefault(Js_dict.get(dict$1, "targetColumns"), null));
    if (targetColumns.TAG === /* Ok */0) {
      return {
              TAG: /* Ok */0,
              _0: {
                sourceColumns: sourceColumns._0,
                targetColumns: targetColumns._0
              }
            };
    }
    var e = targetColumns._0;
    return {
            TAG: /* Error */1,
            _0: {
              path: ".targetColumns" + e.path,
              message: e.message,
              value: e.value
            }
          };
  }
  var e$1 = sourceColumns._0;
  return {
          TAG: /* Error */1,
          _0: {
            path: ".sourceColumns" + e$1.path,
            message: e$1.message,
            value: e$1.value
          }
        };
}

function extractColumns(prim) {
  return ImportFunctionsJs.extractColumns(prim);
}

function Table__Import__Upload(Props) {
  var setImportState = Props.setImportState;
  var importData = Props.importData;
  var spaceId = Props.spaceId;
  var dropZone = ReactDropzone.useDropzone();
  var match = React.useState(function () {
        return importData.schema.maptableName;
      });
  var setName = match[1];
  var name = match[0];
  var match$1 = React.useState(function () {
        return Belt_Option.getWithDefault(importData.schema.source, "");
      });
  var setSource = match$1[1];
  var source = match$1[0];
  var match$2 = React.useState(function () {
        return importData;
      });
  var setImportData = match$2[1];
  var importData$1 = match$2[0];
  var match$3 = React.useState(function () {
        return false;
      });
  var setLoading = match$3[1];
  var match$4 = React.useState(function () {
        
      });
  var setError = match$4[1];
  var error = match$4[0];
  React.useEffect((function () {
          Curry._1(setImportData, (function (param) {
                  var init = importData$1.schema;
                  return {
                          file: importData$1.file,
                          sourceColumns: importData$1.sourceColumns,
                          targetColumns: importData$1.targetColumns,
                          schema: {
                            targetTeamId: init.targetTeamId,
                            maptableName: name,
                            existingMaptableId: init.existingMaptableId,
                            source: source,
                            locate: init.locate,
                            contacts: init.contacts,
                            fields: init.fields,
                            isTemplate: init.isTemplate
                          }
                        };
                }));
        }), [
        name,
        source
      ]);
  React.useEffect((function () {
          if (dropZone.acceptedFiles.length !== 0) {
            Curry._1(setLoading, (function (param) {
                    return true;
                  }));
            $$Promise.$$catch(ImportFunctionsJs.extractColumns(Caml_array.get(dropZone.acceptedFiles, 0)).then(function (data) {
                      Curry._1(setImportData, (function (param) {
                              return {
                                      file: Caml_array.get(dropZone.acceptedFiles, 0),
                                      sourceColumns: data.sourceColumns,
                                      targetColumns: data.targetColumns,
                                      schema: importData$1.schema
                                    };
                            }));
                      Curry._1(setLoading, (function (param) {
                              return false;
                            }));
                      return Promise.resolve(undefined);
                    }), (function (e) {
                    Curry._1(setLoading, (function (param) {
                            return false;
                          }));
                    var err = e.RE_EXN_ID === $$Promise.JsError ? Belt_Option.getWithDefault(e._1.message, "Unexpected error") : "Unexpected error";
                    Curry._1(setError, (function (param) {
                            return err;
                          }));
                    return Promise.resolve(undefined);
                  }));
          }
          
        }), [dropZone.acceptedFiles]);
  var match$5 = importData$1.file;
  return React.createElement("div", {
              className: "w-full"
            }, spaceId !== undefined ? null : [
                React.createElement("div", {
                      className: "text-2xl font-bold"
                    }, "Configure Mapsheet"),
                React.createElement("div", {
                      className: "text-sm font-light text-gray"
                    }, "Enter name and source for your Mapsheet"),
                React.createElement("div", {
                      className: "mt-12 text-xs font-bold tracking-wider text-gray"
                    }, "ENTER MAPSHEET NAME"),
                React.createElement("input", {
                      className: "text-4xl",
                      placeholder: "Mapsheet name",
                      value: name,
                      onChange: (function ($$event) {
                          Curry._1(setName, (function (param) {
                                  return $$event.target.value;
                                }));
                        })
                    })
              ], React.createElement("div", {
                  className: "mt-12 text-sm font-bold"
                }, "File Source (optional)"), React.createElement("div", {
                  className: "rounded-8 border border-light-gray p-2 hover:border-gray"
                }, React.createElement("input", {
                      className: "h-full w-full",
                      placeholder: "Enter source ie Costar, Reonomy, Landvision, Crexi, Broker X, Investor Y, etc",
                      value: source,
                      onChange: (function ($$event) {
                          Curry._1(setSource, (function (param) {
                                  return $$event.target.value;
                                }));
                        })
                    })), error !== undefined ? React.createElement("div", {
                    className: "mt-4 text-red"
                  }, error) : null, React.createElement("div", {
                  className: Cx.cx([
                        "mt-16 flex w-full flex-1 cursor-pointer flex-col items-center justify-center rounded-3xl border border-dashed border-blue bg-blue-upload hover:bg-gainsboro",
                        dropZone.isDragActive ? "bg-gainsboro" : "border-gainsboro bg-white"
                      ]),
                  draggable: true,
                  onDrag: (function (e) {
                      
                    }),
                  onDragStart: (function (e) {
                      
                    })
                }, React.cloneElement(React.createElement("div", {
                          className: "relative flex w-full flex-col items-center justify-center"
                        }, React.createElement(Icon3.IlustratorAttachments.make, {}), React.createElement("p", {
                              className: "my-2 flex flex-row items-center text-14 font-normal text-space-cadet"
                            }, "Drag & Drop File or Click"), match$5 !== undefined ? React.createElement("div", {
                                className: "absolute ml-60 text-green"
                              }, React.createElement(Icon3.CheckMark.make, {
                                    width: 50,
                                    height: 50
                                  })) : (
                            match$3[0] ? React.createElement("div", {
                                    className: "spinner | absolute"
                                  }) : null
                          ), React.cloneElement(React.createElement("input", undefined), Curry._1(dropZone.getInputProps, undefined))), Curry._1(dropZone.getRootProps, undefined))), React.createElement("div", {
                  className: "flex flex-row justify-end"
                }, React.createElement("button", {
                      className: "my-6 mr-8",
                      onClick: (function (param) {
                          var match = importData$1.schema.maptableName;
                          var match$1 = importData$1.file;
                          var match$2 = importData$1.schema.existingMaptableId;
                          if (match === "" && match$2 === undefined) {
                            return Curry._1(setError, (function (param) {
                                          return "You must enter a name for your Mapsheet!";
                                        }));
                          }
                          if (match$1 !== undefined) {
                            return Curry._1(setImportState, (function (param) {
                                          return {
                                                  NAME: "coordinatesPrompt",
                                                  VAL: importData$1
                                                };
                                        }));
                          } else {
                            return Curry._1(setError, (function (param) {
                                          return "You must upload a file!";
                                        }));
                          }
                        })
                    }, React.createElement("div", {
                          className: "flex flex-row items-center justify-center rounded-16 bg-blue py-4 px-14"
                        }, React.createElement("div", {
                              className: "text-white"
                            }, "Next"), React.createElement(Icon3.ArrowRight2.make, {
                              className: "ml-2 text-white"
                            })))));
}

var make = Table__Import__Upload;

exports.extractPayload_encode = extractPayload_encode;
exports.extractPayload_decode = extractPayload_decode;
exports.extractColumns = extractColumns;
exports.make = make;
/* Icon3 Not a pure module */
