/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */
import{LitElement as f,html as r,nothing as p}from"lit";import{property as u,state as g,customElement as b}from"lit/decorators.js";import{until as h}from"lit/directives/until.js";import"@typo3/backend/element/icon-element.js";import{copyToClipboard as v}from"@typo3/backend/copy-to-clipboard.js";import $ from"@typo3/backend/notification.js";import{markdown as w}from"@typo3/core/directive/markdown.js";import k from"@typo3/core/ajax/ajax-request.js";import{SettingsMode as c,sanitizeSettingsMode as A}from"@typo3/backend/settings/enum/settings-mode.enum.js";import y from"~labels/backend.settingseditor";import S from"~labels/backend.copytoclipboard";import"bootstrap";var d=function(l,e,t,i){var o=arguments.length,n=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,t,i);else for(var m=l.length-1;m>=0;m--)(s=l[m])&&(n=(o<3?s(n):o>3?s(e,t,n):s(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};let a=class extends f{constructor(){super(...arguments),this.mode=c.basic,this.hasChange=!1,this.typeElement=null}createRenderRoot(){return this}render(){const{value:e,systemDefault:t,definition:i}=this.setting;return r`<div class=${`settings-item settings-item-${i.type} ${this.hasChange?"has-change":""}`} tabindex=0 data-status=${JSON.stringify(e)===JSON.stringify(t)?"none":"modified"}><div class=settings-item-indicator></div><div class=settings-item-title><label for=${`setting-${i.key}`} class=settings-item-label>${i.label}</label><div class=settings-item-description>${w(i.description??"","minimal")}</div>${this.mode===c.advanced?r`<div class=settings-item-key>${i.key}</div>`:p}</div><div class=settings-item-control>${h(this.renderField(),p)}</div><div class=settings-item-message></div><div class=settings-item-actions>${this.renderActions()}</div></div>`}renderField(){return this.typeElement!==null?(this.updateFieldAttributes(this.typeElement),this.typeElement):(async()=>{const{typeImplementation:e}=this.setting,t=await import(e);if(!("componentName"in t))throw new Error(`module ${e} is missing the "componentName" export`);const i=document.createElement(t.componentName);return i.addEventListener("typo3:setting:changed",o=>{this.hasChange=JSON.stringify(this.setting.value)!==JSON.stringify(o.detail.value)}),this.updateFieldAttributes(i),this.typeElement=i,i})()}updateFieldAttributes(e){const{definition:t,value:i}=this.setting,o={key:t.key,formid:`setting-${t.key}`,name:`settings[${t.key}]`,value:Array.isArray(i)?JSON.stringify(i):String(i),debug:this.mode===c.advanced,readonly:t.readonly,enum:Object.keys(t.enum).length>0?JSON.stringify(t.enum):!1,default:Array.isArray(t.default)?JSON.stringify(t.default):String(t.default),options:JSON.stringify(t.options)};for(const[n,s]of Object.entries(o)){if(typeof s=="boolean"){s&&!e.hasAttribute(n)&&e.setAttribute(n,""),!s&&e.hasAttribute(n)&&e.removeAttribute(n);continue}e.getAttribute(n)!==s&&e.setAttribute(n,s)}}renderActions(){const{definition:e}=this.setting;return r`<div class=dropdown><button class=dropdown-toggle type=button data-bs-toggle=dropdown aria-expanded=false><typo3-backend-icon identifier=actions-cog size=small></typo3-backend-icon><span class=visually-hidden>More actions</span></button><ul class=dropdown-menu><li><button class="dropdown-item dropdown-item-spaced" type=button ?disabled=${e.readonly} @click=${()=>this.setToDefaultValue()}><typo3-backend-icon identifier=actions-undo size=small></typo3-backend-icon>${y.get("settingseditor.edit.resetSetting")}</button></li>${this.mode===c.advanced?r`<li><hr class=dropdown-divider></li><li><typo3-copy-to-clipboard text=${e.key} class="dropdown-item dropdown-item-spaced"><typo3-backend-icon identifier=actions-clipboard size=small></typo3-backend-icon>${y.get("settingseditor.edit.copySettingsIdentifier")}</typo3-copy-to-clipboard></li>${this.dumpuri?r`<li><button class="dropdown-item dropdown-item-spaced" type=button @click=${()=>this.copyAsYaml()}><typo3-backend-icon identifier=actions-clipboard-paste size=small></typo3-backend-icon>${y.get("settingseditor.edit.copyAsYaml")}</button></li>`:p}`:p}</ul></div>`}setToDefaultValue(){this.typeElement&&(this.typeElement.value=this.setting.systemDefault,this.typeElement.requestUpdate("value"))}async copyAsYaml(){const e=new FormData(this.typeElement.form),t=`settings[${this.setting.definition.key}]`,i=e.get(t),o=new FormData;o.append("specificSetting",this.setting.definition.key),o.append(t,i);const s=await(await new k(this.dumpuri).post(o)).resolve();typeof s.yaml=="string"?v(s.yaml):(console.warn("Value can not be copied to clipboard.",typeof s.yaml),$.error(S.get("copyToClipboard.error")))}};d([u({type:Object})],a.prototype,"setting",void 0),d([u({type:String})],a.prototype,"dumpuri",void 0),d([u({type:String,converter:A})],a.prototype,"mode",void 0),d([g()],a.prototype,"hasChange",void 0),a=d([b("typo3-backend-editable-setting")],a);export{a as EditableSettingElement};