document.addEventListener("DOMContentLoaded",()=>{
    let element=document.querySelector("input[name='smpt_icon_required']");
    smpt_remove_icon_set_no(element);

    table_previews=document.querySelectorAll(".smpt-admin-table-preview");

    card_bg_color_input=document.querySelector("input[name='smpt_card_color_picker']");
    active_card_bg_color_input=document.querySelector("input[name='smpt_active_card_color_picker']");
    card_color_input=document.querySelectorAll("input[name='smpt_font_color_picker']");
    card_icon_color_input=document.querySelector("input[name='smpt_icon_color_picker']");
    active_card_icon_color_input=document.querySelector("input[name='smpt_active_card_icon_color_picker']");
    active_card_font_color_input=document.querySelectorAll("input[name='smpt_active_card_font_color_picker']");
    default_styling_input=document.querySelector("input[name='smpt_default_styling']");

    smpt_highlight_preview(document.querySelector("#smpt-table-style-select"));

    let color_pickers=document.querySelectorAll(".smpt-color-picker");
    smpt_card_wrap=document.querySelector(".smpt-card-wrap");
    smpt_cards=document.querySelectorAll(".smpt-card");
    smpt_set_default_styling(document.querySelector("input[name='smpt_default_styling'][checked]"));
    Array.from(color_pickers).forEach((color_picker)=>{
        color_picker.addEventListener("change",(event)=>smpt_color_changed(event.currentTarget,smpt_card_wrap,smpt_cards));
    });
    let color_pickers_siblings=document.querySelectorAll(".smpt-color-picker-sibling");
    Array.from(color_pickers_siblings).forEach((color_picker)=>{
        color_picker.addEventListener("input",(event)=>smpt_color_changed(event.currentTarget,smpt_card_wrap,smpt_cards));
    });
});

function smpt_remove_icon_set_no(element){
    smpt_icon_set_no_radio=document.querySelectorAll('input[name="smpt_icon_set_no"]');
    for(let i=0;i<smpt_icon_set_no_radio.length;i++){
        if(element.checked==true){
            smpt_icon_set_no_radio[i].disabled=false;
            smpt_icon_set_no_radio[i].required=true;
        }
        else{
            smpt_icon_set_no_radio[i].checked=false;
            smpt_icon_set_no_radio[i].disabled=true;
            smpt_icon_set_no_radio[i].required=false;
        }
    }
}

let table_previews;
function smpt_highlight_preview(element){
    if(!table_previews.length)
        return;
    console.log(table_previews.length);
    for(let i=0;i<table_previews.length;i++){
        if(element.value-1==i)
            table_previews[element.value-1].style.display="inline-flex";
        else
            table_previews[i].style.display="none";
    }
    if(element.value==3){
        default_styling_input.closest("table").style.display="block";
        default_styling_input.closest("table").previousElementSibling.style.display="block";
        // card_bg_color_input.closest("tr").style.display="table-row";
        // active_card_bg_color_input.closest("tr").style.display="table-row";
        // card_color_input[0].closest("tr").style.display="table-row";
        // card_icon_color_input.closest("tr").style.display="table-row";
        // default_styling_input.closest("tr").style.display="table-row";
    }
    else{
        default_styling_input.closest("table").style.display="none";
        default_styling_input.closest("table").previousElementSibling.style.display="none";
        // card_bg_color_input.closest("tr").style.display="none";
        // active_card_bg_color_input.closest("tr").style.display="none";
        // card_color_input[0].closest("tr").style.display="none";
        // card_icon_color_input.closest("tr").style.display="none";
        // default_styling_input.closest("tr").style.display="none";
    }
}

function copy_time_table_shortcode(element){
    input=element.previousElementSibling;
    //navigator.clipboard.writeText(input.value);
    input.select();
    document.execCommand('copy');
    input.blur();
    element.classList.add("active");
    setTimeout(()=>element.classList.remove("active"),600);
}
let card_bg_color_input;
let active_card_bg_color_input;
let card_color_input;
let card_icon_color_input;
let active_card_icon_color_input;
let active_card_font_color_input;
let default_styling_input;

function smpt_set_previous_input(element,sibling){
    if(sibling=='previous'){
        element.parentElement.previousElementSibling.value=element.value;
        element.nextElementSibling.value=element.value;
    }
    else if(sibling=='next'){
        element.nextElementSibling.children[0].value=element.value;
        element.nextElementSibling.children[1].value=element.value;
    }
    else if(sibling=='up-next'){
        element.parentElement.nextElementSibling.value=element.value;
    }
    else if(sibling=='up-previous'){
        element.parentElement.previousElementSibling.value=element.value;
    }
}

function smpt_color_changed(element,card_wrap,cards){
    if(element.matches('.smpt-card-bg')){
        for(let i=0;i<cards.length;i++){
            if(i==1)
                continue;
            cards[i].style.backgroundColor=element.value;
        }
    }
    if(element.matches('.smpt-active-card-bg'))
        cards[1].style.backgroundColor=element.value;
    if(element.matches('.smpt-icon-color'))
        card_wrap.style.fill=element.value;
    if(element.matches('.smpt-font-color')){
        for(let i=0;i<cards.length;i++)
            cards[i].style.color=element.value;
    }
    if(element.matches('.smpt-active-icon-color'))
        cards[1].style.fill=element.value;
    if(element.matches('.smpt-active-font-color'))
        cards[1].style.color=element.value;
}

let smpt_card_wrap;
let smpt_cards;
function smpt_set_default_styling(element){
    if(!element)
        return;
    if(element.value=='default'){
        card_bg_color_input.disabled=true;
        card_bg_color_input.nextElementSibling.children[0].disabled=true;
        active_card_bg_color_input.disabled=true;
        active_card_bg_color_input.nextElementSibling.children[0].disabled=true;
        card_color_input[0].disabled=true;
        card_color_input[1].disabled=true;
        card_icon_color_input.disabled=true;
        card_icon_color_input.nextElementSibling.children[0].disabled=true;
        active_card_icon_color_input.disabled=true;
        active_card_icon_color_input.nextElementSibling.children[0].disabled=true;
        active_card_font_color_input[0].disabled=true;
        active_card_font_color_input[1].disabled=true;

        for(let i=0;i<smpt_cards.length;i++)
            smpt_cards[i].style.backgroundColor='#fff';
        smpt_cards[1].style.backgroundColor='#D8D8D8';
        smpt_card_wrap.style.fill='#9e9f9f';
        smpt_cards[1].style.fill='#9e9f9f';
        for(let i=0;i<smpt_cards.length;i++)
            smpt_cards[i].style.color='#3e3e3e';
    }
    else if(element.value=='custom'){
        console.log(card_bg_color_input.nextElementSibling.children[0]);
        card_bg_color_input.disabled=false;
        card_bg_color_input.nextElementSibling.children[0].disabled=false;
        active_card_bg_color_input.disabled=false;
        active_card_bg_color_input.nextElementSibling.children[0].disabled=false;
        card_color_input[0].disabled=false;
        card_color_input[1].disabled=false;
        card_icon_color_input.disabled=false;
        card_icon_color_input.nextElementSibling.children[0].disabled=false;
        active_card_icon_color_input.disabled=false;
        active_card_icon_color_input.nextElementSibling.children[0].disabled=false;
        active_card_font_color_input[0].disabled=false;
        active_card_font_color_input[1].disabled=false;
        for(let i=0;i<smpt_cards.length;i++)
            smpt_cards[i].style.backgroundColor=card_bg_color_input.nextElementSibling.children[0].value;
        smpt_cards[1].style.backgroundColor=active_card_bg_color_input.nextElementSibling.children[0].value;
        smpt_card_wrap.style.fill=card_icon_color_input.nextElementSibling.children[0].value;
        smpt_cards[1].style.fill=active_card_icon_color_input.nextElementSibling.children[0].value;
        if(card_color_input[0].checked || card_color_input[1].checked){
            for(let i=0;i<smpt_cards.length;i++)
                smpt_cards[i].style.color=card_color_input[0].checked?card_color_input[0].value:card_color_input[1].value;
        }
        if(active_card_font_color_input[0].checked || active_card_font_color_input[1].checked){
            smpt_cards[1].style.color=active_card_font_color_input[0].checked?active_card_font_color_input[0].value:active_card_font_color_input[1].value;
        }
    }
}

function smpt_reenter_api(element){
    element.style.display="none";
    element.previousElementSibling.style.display="none";
    element.previousElementSibling.previousElementSibling.type='text';
    element.nextElementSibling.style.display='inline-flex';
}