import{__assign as e,__spreadArrays as t}from"../../../../../../node_modules/tslib/tslib.es6.js";import n,{useState as r,useEffect as a}from"react";import{FieldEntity as o}from"./FormGeneratorEntities/Field.js";import{FieldType as l}from"./FormGeneratorEnums/FieldTypeEnum.js";import{RequiredValidatorEntity as i,EmailValidatorEntity as m,NumericValidatorEntity as c}from"./FormGeneratorEntities/Validator.js";import{Checkbox as s}from"../../../../../../node_modules/@chakra-ui/checkbox/dist/esm/checkbox.js";import{FormControl as u}from"../../../../../../node_modules/@chakra-ui/form-control/dist/esm/form-control.js";import{FormLabel as d}from"../../../../../../node_modules/@chakra-ui/form-control/dist/esm/form-label.js";import{Input as p}from"../../../../../../node_modules/@chakra-ui/input/dist/esm/input.js";import{Select as f}from"../../../../../../node_modules/@chakra-ui/select/dist/esm/select.js";import{Button as E}from"../../../../../../node_modules/@chakra-ui/button/dist/esm/button.js";export default function(h){var b=h.isEditing,v=h.onAddField,x=h.editField,y=h.onCancelEdit,g=h.error,T=h.mandatoryField,k=r(g),C=k[0],w=k[1],N=r(g),A=N[0],F=N[1],O=r(T),j=O[0],D=O[1],I=r(null),L=I[0],M=I[1],R=r(new o),X=R[0],_=R[1],z=r(b),B=z[0],S=z[1],q=[l.TEXT,l.TEXTAREA,l.NUMBER,l.EMAIL,l.CHECKBOX,l.RADIO,l.SELECT,l.DATETIME];a((function(){b?(_(x),D(T)):D(!1),S(b),w(g),F(g)}),[x,b,g]);var G=function(t){_(new o(e(e({},X),{options:t.target.value})))},H=function(){b&&S(!1);var n=X;null!=L&&(n=new o(e(e({},X),{validators:t(X.validators,[L])}))),v(n),M(null),_(new o),D(!1)};return n.createElement(n.Fragment,null,n.createElement("div",{className:"form-structure"},n.createElement("form",{onSubmit:function(e){return e.preventDefault()}},n.createElement(u,null,n.createElement(d,null,"Label"),n.createElement(p,{type:"text",id:"formLabel",name:"formLabel",value:X.label,onChange:function(t){""===t.target.value?w(!0):w(!1),_(new o(e(e({},X),{label:t.target.value})))}}),n.createElement("span",{className:"error"},C?"This field is required!":"")),n.createElement(u,null,n.createElement(d,null,"Type"),n.createElement(f,{name:"formType",id:"formType",value:X.type,onChange:function(t){""===t.target.value?F(!0):F(!1);var n=function(e){switch(e){case"text":return l.TEXT;case"textarea":return l.TEXTAREA;case"number":return M(new c),l.NUMBER;case"email":return M(new m),l.EMAIL;case"checkbox":return l.CHECKBOX;case"radio":return l.RADIO;case"select":return l.SELECT;case"date":return l.DATETIME}return l.NONE}(t.target.value);_(new o(e(e({},X),{type:n})))}},n.createElement("option",{key:l.NONE,value:l.NONE}," ","Choose Input Type"," "),q.map((function(e){return n.createElement("option",{key:e,value:e}," ",e," ")}))),n.createElement("span",{className:"error"},A?"This field is required!":"")),X.type!==l.CHECKBOX&&X.type!==l.RADIO&&X.type!==l.SELECT?null:n.createElement(u,null,n.createElement(d,null,"Options"),n.createElement(p,{type:"text",id:"formOpt",name:"formOpt",placeholder:"Option separated by ;",value:X.options,onChange:G})),n.createElement(u,null,n.createElement(s,{isChecked:j,onChange:function(n){var r=t(X.validators);D(n.target.checked),n.target.checked&&r.push(new i);var a=new o(e(e({},X),{validators:r}));_(a)},name:"required",id:"mandatoryField",size:"lg"},"Mandatory Field")),n.createElement("div",{className:"form-group"},n.createElement("div",{className:"add-field-wrapper "+(B?"d-none":"d-flex")},n.createElement("button",{className:"btn-add toolbar",onClick:function(e){H(),e.preventDefault()}}," ","+"," "),n.createElement("span",null,"Add Field")),n.createElement("div",{className:B?"d-flex justify-content-end":"d-none"},n.createElement("button",{className:"btn btn-secondary",onClick:function(e){_(new o),y(),e.preventDefault()}},"Cancel")," "," ",n.createElement(E,{className:"btn button-link blue",onClick:function(e){H(),e.preventDefault()}},"Update Field")," "))),n.createElement("style",{jsx:!0},"\n          .checkbox-style {\n            width: 18px;\n            height: 18px;\n            cursor: pointer;\n          }\n\n          select,\n          select option {\n            text-transform: capitalize;\n          }\n\n          .add-field-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            cursor: pointer;\n          }\n\n          .add-field-wrapper span {\n            text-transform: uppercase;\n            font-size: 13px;\n          }\n\n          .error {\n            font-size: 14px;\n            color: #d20d25;\n          }\n\n          .btn {\n            text-transform: uppercase;\n            font-size: 13px;\n            font-weight: 600;\n            height: 40px;\n            // width: 120px;\n            text-align: center;\n          }\n\n          :global(.chakra-form-control) {\n            margin-bottom: 1.2rem !important;\n          }\n        ")))}
//# sourceMappingURL=FormGeneratorStructure.js.map
