import{__assign as e}from'./../../../ext-esm/tslib/tslib.es6.js';import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import a from"prop-types";import l from"classnames";import{makeStyles as r,ClickAwayListener as c,TextField as s,Tooltip as d,InputAdornment as m}from"@material-ui/core";import p from"@material-ui/icons/Edit";import u from"@material-ui/icons/Close";import f from"@material-ui/icons/Done";import g from"../../IconButton/index.js";var v=r((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}}})),h=function(a){var r,h=a.className,b=a.isEditable,y=a.isEditing,C=a.onClick,k=a.onClickAway,x=a.onCancel,w=a.onSave,E=a.value,I=n(E),S=I[0],N=I[1],A=n(y),F=A[0],z=A[1],P=v(),R=function(e){e.stopPropagation(),S.length&&S!==E&&w(S).then((function(){return z(!1)}))};o((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(N(E),z(!1),k()):"Enter"===e.key&&R(e)};return F&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[F,E,S]);var j=function(e){e.stopPropagation(),N(E),z(!1),x()};o((function(){N(E)}),[E]);var L=l(P.editableItem,((r={})[P.editableItemActive]=F,r),h);return t("div",e({className:l(L,P.container),onClick:C},{children:[!F&&i("div",e({className:P.value},{children:S})),F&&i(c,e({onClickAway:function(){N(E),z(!1),k()}},{children:i(s,{autoFocus:!0,type:"text",value:S,onChange:function(e){e.stopPropagation(),N(e.target.value)},placeholder:"Page Name...",className:P.textField,InputProps:{classes:{root:P.inputRoot},endAdornment:F?i(m,e({position:"end"},{children:t("span",e({className:P.inputAdornment},{children:[i(d,e({title:"Cancel",placement:"bottom-end"},{children:i(g,e({onClick:j,size:"small",className:P.closeIcon},{children:i(u,{fontSize:"small"})}))})),i(d,e({title:"Save",placement:"bottom-end"},{children:i(g,e({onClick:R,size:"small",disabled:S===E},{children:i(f,{color:S===E?"disabled":"primary",fontSize:"small"})}))}))]}))})):null}})})),b&&!F&&i(d,e({title:"Rename Page",placement:"bottom-end"},{children:i(g,e({className:P.editIcon,size:"small",onClick:function(e){e.stopPropagation(),z(!0)}},{children:i(p,{fontSize:"small"})}))}))]}))},b={className:a.string,isEditable:a.bool,isEditing:a.bool,onClick:a.func,onSave:a.func.isRequired,onClickAway:a.func,onCancel:a.func,value:a.string.isRequired};h.propTypes=b,h.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}};export{h as default};
