import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as n}from"react";import o from"prop-types";import a from"classnames";import{makeStyles as l,ClickAwayListener as r,TextField as c,Tooltip as s,InputAdornment as d}from"@material-ui/core";import m from"@material-ui/icons/Edit";import p from"@material-ui/icons/Close";import u from"@material-ui/icons/Done";import f from"../../IconButton/index.js";var g=l((function(e){return{editableItem:{width:"100%",height:36,position:"relative",backgroundColor:e.palette.background.b8,"&:hover":{backgroundColor:"rgba(3, 188, 212, 0.07)"},"&:hover svg":{visibility:"visible"}},editableItemActive:{backgroundColor:"rgba(3, 188, 212, 0.15)  !important"},container:{display:"flex",alignItems:"center",justifyContent:"space-between","&:hover $editIcon":{visibility:"visible"}},value:{color:e.palette.primary.text6,fontSize:"0.875rem",height:"100%",letterSpacing:".13132px",lineHeight:"36px",overflow:"hidden",paddingLeft:48,textOverflow:"ellipsis",whiteSpace:"nowrap",width:"calc(100% - 32px)",userSelect:"none"},textField:{width:"100%"},inputRoot:{height:36,paddingLeft:48,fontSize:"0.875rem"},inputDisabled:{backgroundColor:"unset",paddingRight:16,"&::before":{display:"none"},pointerEvents:"none"},editIcon:{visibility:"hidden",marginRight:4},closeIcon:{color:e.palette.primary.text6,"&:hover svg":{fill:"".concat(e.palette.primary.contrastText," !important")},"& svg":{fill:"".concat(e.palette.primary.text6," !important"),"&:hover":{fill:"#FFFFFF !important"}}},inputAdornment:{marginTop:1,marginRight:4}}})),v=function(o){var l,v=o.className,h=o.isEditable,b=o.isEditing,y=o.onClick,C=o.onClickAway,k=o.onCancel,x=o.onSave,w=o.value,E=i(w),I=E[0],S=E[1],N=i(b),A=N[0],F=N[1],z=g(),P=function(e){e.stopPropagation(),I.length&&I!==w&&x(I).then((function(){return F(!1)}))};n((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(S(w),F(!1),C()):"Enter"===e.key&&P(e)};return A&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[A,w,I]);var R=function(e){e.stopPropagation(),S(w),F(!1),k()};n((function(){S(w)}),[w]);var L=a(z.editableItem,((l={})[z.editableItemActive]=A,l),v);return e("div",{className:a(L,z.container),onClick:y,children:[!A&&t("div",{className:z.value,children:I}),A&&t(r,{onClickAway:function(){S(w),F(!1),C()},children:t(c,{autoFocus:!0,type:"text",value:I,onChange:function(e){e.stopPropagation(),S(e.target.value)},placeholder:"Page Name...",className:z.textField,InputProps:{classes:{root:z.inputRoot},endAdornment:A?t(d,{position:"end",children:e("span",{className:z.inputAdornment,children:[t(s,{title:"Cancel",placement:"bottom-end",children:t(f,{onClick:R,size:"small",className:z.closeIcon,children:t(p,{fontSize:"small"})})}),t(s,{title:"Save",placement:"bottom-end",children:t(f,{onClick:P,size:"small",disabled:I===w,children:t(u,{color:I===w?"disabled":"primary",fontSize:"small"})})})]})}):null}})}),h&&!A&&t(s,{title:"Rename Page",placement:"bottom-end",children:t(f,{className:z.editIcon,size:"small",onClick:function(e){e.stopPropagation(),F(!0)},children:t(m,{fontSize:"small"})})})]})},h={className:o.string,isEditable:o.bool,isEditing:o.bool,onClick:o.func,onSave:o.func.isRequired,onClickAway:o.func,onCancel:o.func,value:o.string.isRequired};v.propTypes=h,v.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}};export{v as default};
