import{__assign as e,__spreadArrays as t}from"../../../../node_modules/tslib/tslib.es6.js";import r,{useState as n,useEffect as o,useCallback as l}from"react";import{DragDropContext as i,Droppable as a}from"../../../../node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js";import{BsTrash as s}from"../../../../node_modules/react-icons/bs/index.esm.js";import"../../../common/GalleryImageDisplay/style.css.js";import"../../../Announcement/Announcement.js";import"../../../../node_modules/react-modal-promise/lib/index.es.js";import{UrlPicker as m}from"../../UrlPicker/UrlPicker.js";import{useFieldArray as c}from"../../../../node_modules/react-hook-form/dist/index.esm.js";import"../libraryModal.css.js";import"../../TextEditorQuill.js";import"../../../Media/Image.js";import"../../../Typography/Paragraph/Paragraph-utils.js";import"../../../Typography/Paragraph/Paragraph.js";import"../../../../node_modules/next/dist/client/router.js";import"../../../../node_modules/react-redux/es/index.js";import"../../../../node_modules/lodash/lodash.js";import"../../../Typography/Paragraph/ParagraphTypes.js";import"../../../Typography/Heading.js";import"../../../Bloc/BlocTypes.js";import"../../../Bloc/BlocComponentsFactory.js";import"../../../../BaseComponent.js";import"../../../Panel/CtaPanel.js";import{FormControl as p}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 u}from"../../../../node_modules/@chakra-ui/input/dist/esm/input.js";import{Icon as f}from"../../../../node_modules/@chakra-ui/icon/dist/esm/icon.js";export default function(b){var h=b.bloc,g=b.setValue,x=b.register,E=b.errors,j=void 0===E?{}:E,k=b.control,y=b.reset,v=h.properties,T=v.title,_=v.content,P=v.links,B=n(!1),C=B[0],N=B[1],D=n(P||[]),U=D[0],V=D[1],I=c({control:k,name:"properties.links"}),q=I.fields,A=I.append,F=I.remove;o((function(){0===q.length&&g("properties.links",P.slice())}),[q,g,P,N,C]),o((function(){C&&(y(),g("properties.links",q.map((function(t){return e({},t)})),{shouldDirty:!0}),N(!1))}),[q,N,g,C,y]);var L=l((function(e){F(e),N(!0)}),[F,N]),M=l((function(){A({imageUrl:"",imageTitle:"",imageDescription:"",imageLink:"",imageLinkText:""})}),[A]);return r.createElement(r.Fragment,null,r.createElement("div",{className:"form-bloc-modal"},r.createElement(p,null,r.createElement(d,null,"Title"),r.createElement(u,{type:"text",name:"properties.title",defaultValue:T,ref:x({required:"Title is required."}),placeholder:"Title",isInvalid:j.properties&&j.properties.title})),r.createElement(p,null,r.createElement(d,null,"Content"),r.createElement(u,{type:"text",name:"properties.content",defaultValue:_,ref:x,placeholder:"Content"})),r.createElement("br",null),r.createElement(i,{onDragEnd:function(e){if(e.destination&&e.destination.index!==e.source.index){var r=t(U),n=r.splice(e.source.index,1)[0];r.splice(e.destination.index,0,n),V(r),g("properties.links",r)}}},r.createElement(a,{droppableId:"droppable-cta-links",key:"droppable-cta-links"},(function(t,n){return r.createElement("div",e({},t.droppableProps,{ref:t.innerRef}),q.map((function(e,t){var n=e.buttonUrl,o=e.buttonText;return r.createElement("div",{key:t,className:"flex-column-structure"},r.createElement("div",{className:"flex-column-structure-child position-relative"},r.createElement("div",{className:"toolbar cursor-pointer"},r.createElement("span",{onClick:function(){return L(t)}},r.createElement(f,{as:s}))),r.createElement("div",{className:"pt-5 p-1"},r.createElement(p,null,r.createElement(d,null,"Button Text"),r.createElement(u,{type:"text",name:"properties.links['"+t+"'].buttonText",defaultValue:o,ref:x,placeholder:"Button Text"})),r.createElement(p,null,r.createElement(m,{name:"properties.links['"+t+"'].buttonUrl",label:"Url",register:x,setValue:g,initialValue:n})))))})),t.placeholder,r.createElement("div",{className:"text-center"},r.createElement("button",{className:"btn-add panel-link",onClick:function(e){M(),e.preventDefault()}},"+")))}))),r.createElement("style",{jsx:!0},"\n          .toolbar {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 12%;\n            height: 35px;\n            background: #e8f0fe;\n            border-bottom-right-radius: 0.2rem;\n            border-top-left-radius: 0.2rem;\n            color: #1967d2;\n            padding: 0rem 1rem;\n          }\n\n          .flex-column-structure-child {\n            border: 1px dashed #b3c4d6;\n          }\n\n          .flex-column-structure {\n            background: rgba(222, 228, 238, 0.3);\n          }\n        ")))}
//# sourceMappingURL=CtaPanelSetting.js.map
