# -*- coding: utf-8 -*-
# Build theme/theme-toggle.control — segmented icon pill (Auto | Light | Dark),
# like Google's theme switcher. Auto follows prefers-color-scheme.
import json, sys
sys.stdout.reconfigure(encoding='utf-8')

# Material icons: brightness_auto / light_mode / dark_mode
AUTO = "M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-5.35 7.31L14 14H10l-.65 2H7.4l3.05-8h1.9l3.05 8h-1.75z"
SUN  = "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
MOON = "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"

def seg(mode, path, title):
    return (f'<button class="tt-seg" id="seg-{mode}" data-mode="{mode}" title="{title}" type="button">'
            f'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="{path}"/></svg></button>')

html = ('<div id="wrap" class="tt-wrap">'
        + seg('auto', AUTO, 'Auto (system)')
        + seg('light', SUN, 'Light')
        + seg('dark', MOON, 'Dark')
        + '</div>')

style = (
":host{display:inline-block;font-family:'Segoe UI',Roboto,sans-serif;}"
".tt-wrap{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;"
 "border:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);height:100%;box-sizing:border-box;}"
".tt-seg{appearance:none;border:none;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;"
 "padding:8px 16px;background:transparent;color:var(--ui-dim,#9aa3b0);transition:background .15s,color .15s;}"
".tt-seg + .tt-seg{border-left:1px solid var(--ui-border,#3b4250);}"
".tt-seg svg{width:20px;height:20px;fill:currentColor;display:block;}"
".tt-seg:hover{color:var(--ui-text,#e2e6ec);}"
".tt-seg.active{background:color-mix(in srgb,var(--accent,#2680eb) 22%,transparent);color:var(--accent,#2680eb);}"
".tt-seg[data-mode=auto].active svg{filter:drop-shadow(0 0 1px var(--accent,#2680eb));}"
)

script = r"""const KEY='webui-theme-mode';
function resolved(instance,mode){
    if(mode==='light') return instance.lighttheme||'light';
    if(mode==='dark') return instance.darktheme||'dark';
    return window.matchMedia('(prefers-color-scheme: dark)').matches?(instance.darktheme||'dark'):(instance.lighttheme||'light');
}
function getMode(){ try{ return localStorage.getItem(KEY)||'auto'; }catch(e){ return 'auto'; } }
function mark(instance){
    const m=getMode();
    for(const md of ['auto','light','dark']){
        const b=instance._getDomElement('seg-'+md);
        if(b) b.classList.toggle('active', md===m);
    }
}
function setMode(instance,mode){
    try{ localStorage.setItem(KEY,mode); }catch(e){}
    if(window.mywebuiTheme) window.mywebuiTheme.apply(resolved(instance,mode));
    mark(instance);
}
export function init(instance){
    for(const md of ['auto','light','dark']){
        const b=instance._getDomElement('seg-'+md);
        if(b) b.addEventListener('click',()=>setMode(instance,md));
    }
    try{
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',()=>{
            if(getMode()==='auto') setMode(instance,'auto');
        });
    }catch(e){}
    window.addEventListener('webui-theme-changed',()=>mark(instance));
    // re-apply on load so 'auto' resolves against the CURRENT system scheme
    if(window.mywebuiTheme && getMode()==='auto') setMode(instance,'auto'); else mark(instance);
}
export function connectedCallback(instance){}"""

d = {
 "properties": {
   "lighttheme": {"type":"string","default":"light"},
   "darktheme": {"type":"string","default":"dark"}
 },
 "settings": {"width":"170px","height":"40px"},
 "html": html,
 "style": style,
 "script": script
}

out = r"e:/files/iobroker my adapters/iobroker.webui my edited/iobroker.webui/default-controls/controls/theme/theme-toggle.control"
json.dump(d, open(out,'w',encoding='utf-8'), ensure_ascii=False)
json.dump(d, open(r"E:/iob_Stansiya486/iobStansiya486/tmp_tt.control",'w',encoding='utf-8'), ensure_ascii=False)
print("written; json valid:", bool(json.load(open(out,encoding='utf-8'))))