// Generated by ReScript, PLEASE EDIT WITH CARE

import * as Curry from "rescript/lib/es6/curry.js";
import * as Icon3 from "../../Icon3.bs.js";
import * as React from "react";
import * as Js_dict from "rescript/lib/es6/js_dict.js";
import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
import * as Belt_Option from "rescript/lib/es6/belt_Option.js";

function Table__Import__AddressFull(Props) {
  var importData = Props.importData;
  var setImportState = Props.setImportState;
  var handleBack = Props.handleBack;
  var match = React.useState(function () {
        return Js_dict.fromArray([[
                      "Address",
                      undefined
                    ]]);
      });
  var setMappings = match[1];
  var mappings = match[0];
  var renderMappings = function (param) {
    return Belt_Array.mapWithIndex(Js_dict.entries(mappings), (function (index, param) {
                  var item = param[1];
                  var key = param[0];
                  return React.createElement("div", {
                              key: String(index),
                              className: "mt-2 flex w-full flex-row items-center"
                            }, React.createElement("select", {
                                  className: "flex flex-1 rounded border border-gray-input p-2 text-sm leading-none focus:border-gray",
                                  value: Belt_Option.getWithDefault(item, ""),
                                  onChange: (function ($$event) {
                                      var value = $$event.target.value;
                                      var newMappings = Js_dict.fromArray(Js_dict.entries(mappings));
                                      newMappings[key] = value;
                                      Curry._1(setMappings, (function (param) {
                                              return newMappings;
                                            }));
                                    })
                                }, Belt_Array.concat([React.createElement("option", {
                                            key: "0",
                                            disabled: true,
                                            selected: Belt_Option.isNone(item),
                                            value: ""
                                          }, "Select Column")], Belt_Array.mapWithIndex(importData.sourceColumns, (function (index, name) {
                                            return React.createElement("option", {
                                                        key: String(index + 1 | 0),
                                                        value: name
                                                      }, name);
                                          })))), React.createElement(Icon3.ArrowDoubleRight.make, {
                                  className: "ml-2"
                                }), React.createElement("div", {
                                  className: "ml-2 flex flex-1 items-center justify-between rounded border border-gray-input bg-light-gray p-2 text-sm"
                                }, key, React.createElement(Icon3.Lock.make, {})));
                }));
  };
  var match$1 = React.useState(function () {
        
      });
  var setError = match$1[1];
  var error = match$1[0];
  var buildLocate = function (param) {
    return {
            latitudeKey: undefined,
            longitudeKey: undefined,
            addressKey: mappings["Address"],
            cityKey: undefined,
            stateKey: undefined,
            zipKey: undefined
          };
  };
  return React.createElement("div", {
              className: "flex h-full w-full flex-col overflow-auto"
            }, React.createElement("div", {
                  className: "mt-4 text-2xl font-bold"
                }, "Map Address Column"), React.createElement("div", {
                  className: "text-sm text-roman-silver"
                }, "Select the address column from your file"), React.createElement("div", {
                  className: "mt-4 flex justify-between"
                }, React.createElement("div", {
                      className: "text-xs text-gray"
                    }, "FILE COLUMNS"), React.createElement("div", {
                      className: "text-xs text-gray"
                    }, "MAPSHEET COLUMNS")), React.createElement("div", {
                  className: "flex w-full flex-col"
                }, renderMappings(undefined)), React.createElement("div", {
                  className: "flex flex-row justify-between"
                }, React.createElement("button", {
                      className: "my-6 mr-8",
                      onClick: (function (param) {
                          Curry._1(handleBack, importData);
                        })
                    }, React.createElement("div", {
                          className: "flex flex-row items-center justify-center rounded-16 py-4 px-14 hover:bg-light-gray"
                        }, React.createElement("div", undefined, "Back"))), React.createElement("button", {
                      className: "my-6",
                      onClick: (function (param) {
                          var missing = Belt_Array.some(Js_dict.values(mappings), (function (item) {
                                  return item === undefined;
                                }));
                          if (missing) {
                            return Curry._1(setError, (function (param) {
                                          return "You must map all columns!";
                                        }));
                          }
                          var builtLocate = buildLocate(undefined);
                          var init = Belt_Option.getWithDefault(importData.schema.locate, builtLocate);
                          var locate_latitudeKey = init.latitudeKey;
                          var locate_longitudeKey = init.longitudeKey;
                          var locate_addressKey = builtLocate.addressKey;
                          var locate_cityKey = init.cityKey;
                          var locate_stateKey = init.stateKey;
                          var locate_zipKey = init.zipKey;
                          var locate = {
                            latitudeKey: locate_latitudeKey,
                            longitudeKey: locate_longitudeKey,
                            addressKey: locate_addressKey,
                            cityKey: locate_cityKey,
                            stateKey: locate_stateKey,
                            zipKey: locate_zipKey
                          };
                          Curry._1(setError, (function (param) {
                                  
                                }));
                          Curry._1(setImportState, (function (param) {
                                  var init = importData.schema;
                                  return {
                                          NAME: "contactPrompt",
                                          VAL: {
                                            file: importData.file,
                                            sourceColumns: importData.sourceColumns,
                                            targetColumns: importData.targetColumns,
                                            schema: {
                                              targetTeamId: init.targetTeamId,
                                              maptableName: init.maptableName,
                                              existingMaptableId: init.existingMaptableId,
                                              source: init.source,
                                              locate: locate,
                                              contacts: init.contacts,
                                              fields: init.fields,
                                              isTemplate: init.isTemplate
                                            }
                                          }
                                        };
                                }));
                        })
                    }, 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"
                            })))), error !== undefined ? React.createElement("div", {
                    className: "mt-4 text-red"
                  }, error) : null);
}

var make = Table__Import__AddressFull;

export {
  make ,
}
/* Icon3 Not a pure module */
