// 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 Belt_Array from "rescript/lib/es6/belt_Array.js";
import * as Belt_Option from "rescript/lib/es6/belt_Option.js";

function Table__Import__Contact(Props) {
  var importData = Props.importData;
  var setImportState = Props.setImportState;
  var handleBack = Props.handleBack;
  var match = React.useState(function () {
        return [{
                  expanded: true,
                  contact: {
                    contactNameKey: undefined,
                    contactAddressKey: undefined,
                    contactEmailKeys: [],
                    contactPhoneKeys: []
                  }
                }];
      });
  var setCells = match[1];
  var cells = match[0];
  var renderCells = function (param) {
    return Belt_Array.mapWithIndex(cells, (function (index, cell) {
                  return React.createElement(React.Fragment, undefined, React.createElement("div", {
                                  className: "mt-4 flex cursor-pointer items-center justify-between rounded bg-F7F7F8 p-2 hover:bg-gainsboro",
                                  onClick: (function (param) {
                                      var newCells = Belt_Array.mapWithIndex(cells, (function (index$1, cell) {
                                              return {
                                                      expanded: index === index$1 ? !cell.expanded : cell.expanded,
                                                      contact: cell.contact
                                                    };
                                            }));
                                      Curry._1(setCells, (function (param) {
                                              return newCells;
                                            }));
                                    })
                                }, React.createElement("div", {
                                      className: "flex items-center justify-start"
                                    }, cell.expanded ? React.createElement(Icon3.ArrowDown3.make, {}) : React.createElement(Icon3.ArrowRight3.make, {}), React.createElement("div", {
                                          className: "ml-2"
                                        }, "Contact " + String(index + 1 | 0) + "")), index > 0 ? React.createElement("div", {
                                        className: "mr-2 rounded p-1 hover:bg-roman-silver",
                                        onClick: (function (e) {
                                            e.stopPropagation();
                                            var newCells = Belt_Array.keepWithIndex(cells, (function (param, index$1) {
                                                    return index$1 !== index;
                                                  }));
                                            Curry._1(setCells, (function (param) {
                                                    return newCells;
                                                  }));
                                          })
                                      }, React.createElement(Icon3.Trash.make, {})) : null), cell.expanded ? React.createElement(React.Fragment, undefined, 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: "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(cell.contact.contactNameKey, ""),
                                            onChange: (function ($$event) {
                                                var value = $$event.target.value;
                                                var newCells = Belt_Array.map(cells, (function (cell) {
                                                        var newContact;
                                                        if (cell.expanded) {
                                                          var init = cell.contact;
                                                          newContact = {
                                                            contactNameKey: value,
                                                            contactAddressKey: init.contactAddressKey,
                                                            contactEmailKeys: init.contactEmailKeys,
                                                            contactPhoneKeys: init.contactPhoneKeys
                                                          };
                                                        } else {
                                                          newContact = cell.contact;
                                                        }
                                                        return {
                                                                expanded: cell.expanded,
                                                                contact: newContact
                                                              };
                                                      }));
                                                Curry._1(setCells, (function (param) {
                                                        return newCells;
                                                      }));
                                              })
                                          }, Belt_Array.concat([React.createElement("option", {
                                                      key: "0",
                                                      disabled: true,
                                                      selected: Belt_Option.isNone(cell.contact.contactNameKey),
                                                      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"
                                          }, "Contact Name", React.createElement(Icon3.Lock.make, {}))), React.createElement("div", {
                                        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(cell.contact.contactAddressKey, ""),
                                            onChange: (function ($$event) {
                                                var value = $$event.target.value;
                                                var newCells = Belt_Array.map(cells, (function (cell) {
                                                        var newContact;
                                                        if (cell.expanded) {
                                                          var init = cell.contact;
                                                          newContact = {
                                                            contactNameKey: init.contactNameKey,
                                                            contactAddressKey: value,
                                                            contactEmailKeys: init.contactEmailKeys,
                                                            contactPhoneKeys: init.contactPhoneKeys
                                                          };
                                                        } else {
                                                          newContact = cell.contact;
                                                        }
                                                        return {
                                                                expanded: cell.expanded,
                                                                contact: newContact
                                                              };
                                                      }));
                                                Curry._1(setCells, (function (param) {
                                                        return newCells;
                                                      }));
                                              })
                                          }, Belt_Array.concat([React.createElement("option", {
                                                      key: "0",
                                                      disabled: true,
                                                      selected: Belt_Option.isNone(cell.contact.contactAddressKey),
                                                      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"
                                          }, "Contact Address", React.createElement(Icon3.Lock.make, {}))), Belt_Array.mapWithIndex(cell.contact.contactPhoneKeys, (function (index, phone) {
                                          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(phone, ""),
                                                          onChange: (function ($$event) {
                                                              var value = $$event.target.value;
                                                              var newCells = Belt_Array.map(cells, (function (cell) {
                                                                      var newContact = cell.expanded ? (function (param) {
                                                                            var phoneKeys = cell.contact.contactPhoneKeys;
                                                                            Belt_Array.set(phoneKeys, index, value);
                                                                            var init = cell.contact;
                                                                            return {
                                                                                    contactNameKey: init.contactNameKey,
                                                                                    contactAddressKey: init.contactAddressKey,
                                                                                    contactEmailKeys: init.contactEmailKeys,
                                                                                    contactPhoneKeys: phoneKeys
                                                                                  };
                                                                          }) : (function (param) {
                                                                            return cell.contact;
                                                                          });
                                                                      return {
                                                                              expanded: cell.expanded,
                                                                              contact: Curry._1(newContact, undefined)
                                                                            };
                                                                    }));
                                                              Curry._1(setCells, (function (param) {
                                                                      return newCells;
                                                                    }));
                                                            })
                                                        }, Belt_Array.concat([React.createElement("option", {
                                                                    key: "0",
                                                                    disabled: true,
                                                                    selected: Belt_Option.isNone(phone),
                                                                    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"
                                                        }, "Phone " + String(index + 1 | 0) + "", React.createElement(Icon3.Lock.make, {})));
                                        })), Belt_Array.mapWithIndex(cell.contact.contactEmailKeys, (function (index, email) {
                                          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(email, ""),
                                                          onChange: (function ($$event) {
                                                              var value = $$event.target.value;
                                                              var newCells = Belt_Array.map(cells, (function (cell) {
                                                                      var newContact;
                                                                      if (cell.expanded) {
                                                                        var init = cell.contact;
                                                                        newContact = {
                                                                          contactNameKey: init.contactNameKey,
                                                                          contactAddressKey: init.contactAddressKey,
                                                                          contactEmailKeys: Belt_Array.concat(Belt_Array.keepWithIndex(cell.contact.contactEmailKeys, (function (param, i) {
                                                                                      return i !== index;
                                                                                    })), [value]),
                                                                          contactPhoneKeys: init.contactPhoneKeys
                                                                        };
                                                                      } else {
                                                                        newContact = cell.contact;
                                                                      }
                                                                      return {
                                                                              expanded: cell.expanded,
                                                                              contact: newContact
                                                                            };
                                                                    }));
                                                              Curry._1(setCells, (function (param) {
                                                                      return newCells;
                                                                    }));
                                                            })
                                                        }, Belt_Array.concat([React.createElement("option", {
                                                                    key: "0",
                                                                    disabled: true,
                                                                    selected: Belt_Option.isNone(email),
                                                                    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"
                                                        }, "Email " + String(index + 1 | 0) + "", React.createElement(Icon3.Lock.make, {})));
                                        }))) : null);
                }));
  };
  var match$1 = React.useState(function () {
        
      });
  var setError = match$1[1];
  var error = match$1[0];
  return React.createElement("div", {
              className: "flex h-full w-full flex-col"
            }, React.createElement("div", {
                  className: "mt-4 text-2xl font-bold"
                }, "Map Contact Columns"), React.createElement("div", {
                  className: "text-sm text-roman-silver"
                }, "Select each column that relates to the contact information in your file"), React.createElement("div", {
                  className: "flex max-h-[40rem] w-full flex-col overflow-auto pr-2"
                }, renderCells(undefined)), React.createElement("div", {
                  className: "my-6 flex flex-row"
                }, React.createElement("button", {
                      onClick: (function (param) {
                          var newCells = Belt_Array.concat(Belt_Array.map(cells, (function (cell) {
                                      return {
                                              expanded: false,
                                              contact: cell.contact
                                            };
                                    })), [{
                                  expanded: true,
                                  contact: {
                                    contactNameKey: undefined,
                                    contactAddressKey: undefined,
                                    contactEmailKeys: [],
                                    contactPhoneKeys: []
                                  }
                                }]);
                          Curry._1(setCells, (function (param) {
                                  return newCells;
                                }));
                        })
                    }, React.createElement("div", {
                          className: "flex flex-row items-center justify-center rounded-16 bg-F7F7F8 py-2 px-6 text-sm text-black hover:bg-gainsboro"
                        }, React.createElement(Icon3.Add.make, {}), React.createElement("div", {
                              className: "ml-2"
                            }, "Add Contact"))), Belt_Array.some(cells, (function (cell) {
                        return cell.expanded;
                      })) ? React.createElement("button", {
                        onClick: (function (param) {
                            var newCells = Belt_Array.map(cells, (function (cell) {
                                    var newContact;
                                    if (cell.expanded) {
                                      var init = cell.contact;
                                      newContact = {
                                        contactNameKey: init.contactNameKey,
                                        contactAddressKey: init.contactAddressKey,
                                        contactEmailKeys: init.contactEmailKeys,
                                        contactPhoneKeys: Belt_Array.concat(cell.contact.contactPhoneKeys, [undefined])
                                      };
                                    } else {
                                      newContact = cell.contact;
                                    }
                                    return {
                                            expanded: cell.expanded,
                                            contact: newContact
                                          };
                                  }));
                            Curry._1(setCells, (function (param) {
                                    return newCells;
                                  }));
                          })
                      }, React.createElement("div", {
                            className: "ml-4 flex flex-row items-center justify-center rounded-16 bg-F7F7F8 py-2 px-6 text-sm text-black hover:bg-gainsboro"
                          }, React.createElement(Icon3.Add.make, {}), React.createElement("div", {
                                className: "ml-2"
                              }, "Add Phone Number"))) : null, Belt_Array.some(cells, (function (cell) {
                        return cell.expanded;
                      })) ? React.createElement("button", {
                        onClick: (function (param) {
                            var newCells = Belt_Array.map(cells, (function (cell) {
                                    var newContact;
                                    if (cell.expanded) {
                                      var init = cell.contact;
                                      newContact = {
                                        contactNameKey: init.contactNameKey,
                                        contactAddressKey: init.contactAddressKey,
                                        contactEmailKeys: Belt_Array.concat(cell.contact.contactEmailKeys, [undefined]),
                                        contactPhoneKeys: init.contactPhoneKeys
                                      };
                                    } else {
                                      newContact = cell.contact;
                                    }
                                    return {
                                            expanded: cell.expanded,
                                            contact: newContact
                                          };
                                  }));
                            Curry._1(setCells, (function (param) {
                                    return newCells;
                                  }));
                          })
                      }, React.createElement("div", {
                            className: "ml-4 flex flex-row items-center justify-center rounded-16 bg-F7F7F8 py-2 px-6 text-sm text-black hover:bg-gainsboro"
                          }, React.createElement(Icon3.Add.make, {}), React.createElement("div", {
                                className: "ml-2"
                              }, "Add Email"))) : null), 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) {
                          Curry._1(setError, (function (param) {
                                  
                                }));
                          Curry._1(setImportState, (function (param) {
                                  var init = importData.schema;
                                  return {
                                          NAME: "extract",
                                          VAL: {
                                            file: importData.file,
                                            sourceColumns: importData.sourceColumns,
                                            targetColumns: importData.targetColumns,
                                            schema: {
                                              targetTeamId: init.targetTeamId,
                                              maptableName: init.maptableName,
                                              existingMaptableId: init.existingMaptableId,
                                              source: init.source,
                                              locate: init.locate,
                                              contacts: Belt_Array.map(cells, (function (cell) {
                                                      return cell.contact;
                                                    })),
                                              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__Contact;

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