// Alap input
window.pds.input.createAndMount(container, {
    name: 'demo_alap',
    label: 'Alap input',
    placeholder: 'Írj be valamit...',
});

// Clearable input
window.pds.input.createAndMount(container, {
    name: 'demo_clearable',
    label: 'Clearable',
    value: 'Törölhető tartalom',
    clearable: true,
});

// Leading ikon
window.pds.input.createAndMount(container, {
    name: 'demo_leading',
    label: 'Leading ikon',
    placeholder: 'E-mail cím',
    leadingIcon: 'mail-01',
    type: 'email',
});

// Trailing gomb
window.pds.input.createAndMount(container, {
    name: 'demo_trailing_btn',
    label: 'Trailing gomb (keresés)',
    placeholder: 'Keresési kifejezés...',
    trailingButton: 'search-md',
    trailingButtonFunction: 'handleInputSearch',
});

// Input újra-renderelése üzenetekkel
function renderInputWithMessages(type) {
    const container = document.getElementById('input-example-2');
    container.innerHTML = '';

    const messageMap = {
        error:   { errorMessages:   ['Ez a mező kötelező.', 'Érvénytelen formátum.'] },
        warning: { warningMessages: ['Lejárt adat – ellenőrizd az értéket.'] },
        info:    { infoMessages:    ['Legalább 8 karakter szükséges.'] },
        success: { successMessages: ['Az érték megfelelő formátumú.'] },
    };

    const instance = window.pds.input.createAndMount(container, {
        name: 'demo_messages',
        label: 'Validált mező',
        value: 'teszt@domain.hu',
        type: 'email',
        ...( messageMap[type] || {} ),
    });

    // _dsInstance ugyanúgy elérhető, mint Blade-rendered inputnál
    console.log(instance.wrapper._dsInstance === instance); // true
}

// 1. Input létrehozása error üzenetekkel
const instance = window.pds.input.createAndMount(container, {
    name: 'promo_code',
    label: 'Promóciós kód',
    placeholder: 'PROMO-XXXX',
    errorMessages: ['Érvénytelen kód.'],
});

// 2. Slot tartalom hozzáadása post-creation
const hint = document.createElement('div');
hint.className = 'ds-body-3 ds-color-secondary';
hint.textContent = 'Hint: a kód az e-mailben érkezett.';

window.pds.input.setSlot(instance.wrapper, 'beforeMessagesSlot', hint);

// Ugyanaz elérhető direktben a konténeren keresztül is:
const slotContainer = window.pds.input.getSlot(instance.wrapper, 'beforeMessagesSlot');
slotContainer.appendChild(document.createTextNode(' (pl. PROMO-2025)'));

// Csak HTML string – nincs DOM-ra hivatkozás, nincs hydration
const html = window.pds.input.render({
    name: 'html_only',
    label: 'HTML-only input',
    placeholder: 'Csak statikus HTML...',
    leadingIcon: 'user-01',
    additionalInfo: 'Ez az input csak HTML, nincs JS viselkedés.',
});

container.innerHTML += html;

// Alap checkbox
window.pds.checkbox.createAndMount(container, {
    name: 'cb_alap',
    label: 'Alap checkbox',
});

// Checked állapot
window.pds.checkbox.createAndMount(container, {
    name: 'cb_checked',
    label: 'Kijelölve',
    checked: true,
});

// Disabled
window.pds.checkbox.createAndMount(container, {
    name: 'cb_disabled',
    label: 'Letiltva',
    disabled: true,
});

// Checked + Disabled
window.pds.checkbox.createAndMount(container, {
    name: 'cb_checked_disabled',
    label: 'Kijelölve + letiltva',
    checked: true,
    disabled: true,
});

// Indeterminate típus
window.pds.checkbox.createAndMount(container, {
    name: 'cb_interminate',
    label: 'Határozatlan állapot',
    type: 'interminate',
    checked: true,
});

// Kis méret
window.pds.checkbox.createAndMount(container, {
    name: 'cb_sm',
    label: 'Kis méret (sm)',
    size: 'sm',
});

// Default méret (size elhagyható)
window.pds.checkbox.createAndMount(container, {
    name: 'cb_default',
    label: 'Alap méret (default)',
});

// Nagy méret
window.pds.checkbox.createAndMount(container, {
    name: 'cb_lg',
    label: 'Nagy méret (lg)',
    size: 'lg',
});

// Hibaállapot
window.pds.checkbox.createAndMount(container, {
    name: 'cb_error',
    label: 'Elfogadom a feltételeket – kötelező',
    error: ['Ez a mező kötelező.'],
});

// Adatok tömbje
const options = [
    { value: 'tech', label: 'Technológia', checked: true },
    { value: 'design', label: 'Design' },
    { value: 'marketing', label: 'Marketing', checked: true },
    { value: 'finance', label: 'Pénzügy' },
];

// Checkbox-ok generálása
options.forEach(opt => {
    window.pds.checkbox.createAndMount(container, {
        name: `interest_${opt.value}`,
        id: `interest_${opt.value}`,
        label: opt.label,
        checked: opt.checked || false,
    });
});

// Kijelölt értékek olvasása
const selected = Array.from(container.querySelectorAll('input[type="checkbox"]:checked'))
    .map(input => input.name.replace('interest_', ''));
console.log(selected); // ['tech', 'marketing']

// Csak HTML string – nincs DOM-ra hivatkozás
const html = window.pds.checkbox.render({
    name: 'html_checkbox',
    label: 'Statikus HTML checkbox',
    size: 'lg',
    checked: true,
});

container.innerHTML += html;

// Alap switch (md méret, label nélkül)
window.pds.switch.createAndMount(container, {
    name: 'sw_alap',
});

// Checked állapot
window.pds.switch.createAndMount(container, {
    name: 'sw_checked',
    checked: true,
});

// Disabled
window.pds.switch.createAndMount(container, {
    name: 'sw_disabled',
    label: 'Letiltva',
    disabled: true,
});

// Kis méret
window.pds.switch.createAndMount(container, {
    name: 'sw_sm',
    label: 'Kis méret (sm)',
    size: 'sm',
    checked: true,
});

// Normál switch szöveggel
window.pds.switch.createAndMount(container, {
    name: 'sw_notifications',
    label: 'Email értesítések küldése',
    checked: true,
});

// Disabled switch szöveggel
window.pds.switch.createAndMount(container, {
    name: 'sw_push',
    label: 'Push értesítések (letiltva)',
    disabled: true,
});

// Hibaüzenettel
window.pds.switch.createAndMount(container, {
    name: 'sw_required',
    label: 'Elfogadom az értesítéseket – kötelező',
    error: ['A kapcsoló bekapcsolása kötelező.'],
});

const settings = [
    { key: 'email',    label: 'Email értesítések',           checked: true },
    { key: 'push',     label: 'Push értesítések',            checked: false },
    { key: 'sms',      label: 'SMS értesítések',             checked: true },
    { key: 'weekly',   label: 'Heti összefoglaló',           checked: false },
];

// Beágyazott layout (sor: szöveg bal, switch jobb)
settings.forEach(setting => {
    const row = document.createElement('div');
    row.className = 'ds-flex-row ds-flex-justify-between ds-flex-align-center';

    const textEl = document.createElement('span');
    textEl.className = 'ds-body-2';
    textEl.textContent = setting.label;

    const sw = window.pds.switch.create({
        name: `setting_${setting.key}`,
        id: `setting_${setting.key}`,
        checked: setting.checked,
        size: 'sm',
    });

    row.appendChild(textEl);
    row.appendChild(sw);
    container.appendChild(row);
});

// Állapotok olvasása
const active = Array.from(
    container.querySelectorAll('input[type="checkbox"]:checked')
).map(input => input.name.replace('setting_', ''));
console.log(active); // ['email', 'sms']

const html = window.pds.switch.render({
    name: 'html_switch',
    label: 'Statikus HTML switch',
    size: 'md',
    checked: true,
});

container.innerHTML += html;