<?php

namespace GriffinForms\Admin\Js\Local;

class Onboarding extends \GriffinForms\Admin\Js\Local\format
{
    protected function localJs()
    {
        return
            'const dismissBtn = document.querySelector("[data-gf-onboarding-dismiss]");' . PHP_EOL .
            'if (dismissBtn) {' . PHP_EOL .
            '    dismissBtn.addEventListener("click", function() {' . PHP_EOL .
            '        dismissBtn.setAttribute("aria-disabled", "true");' . PHP_EOL .
            '    });' . PHP_EOL .
            '}' . PHP_EOL .
            'document.querySelectorAll(".gf-onboarding-goal-card").forEach(function(card) {' . PHP_EOL .
            '    const input = card.querySelector(".gf-onboarding-goal-input");' . PHP_EOL .
            '    if (!input) {' . PHP_EOL .
            '        return;' . PHP_EOL .
            '    }' . PHP_EOL .
            '    card.addEventListener("click", function() {' . PHP_EOL .
            '        document.querySelectorAll(".gf-onboarding-goal-card").forEach(function(otherCard) {' . PHP_EOL .
            '            otherCard.classList.remove("is-selected");' . PHP_EOL .
            '        });' . PHP_EOL .
            '        input.checked = true;' . PHP_EOL .
            '        card.classList.add("is-selected");' . PHP_EOL .
            '    });' . PHP_EOL .
            '});' . PHP_EOL .
            'document.querySelectorAll(".gf-onboarding-placement-card").forEach(function(card) {' . PHP_EOL .
            '    const input = card.querySelector("input[type=radio]");' . PHP_EOL .
            '    if (!input) {' . PHP_EOL .
            '        return;' . PHP_EOL .
            '    }' . PHP_EOL .
            '    card.addEventListener("click", function() {' . PHP_EOL .
            '        document.querySelectorAll(".gf-onboarding-placement-card").forEach(function(otherCard) {' . PHP_EOL .
            '            otherCard.classList.remove("is-selected");' . PHP_EOL .
            '        });' . PHP_EOL .
            '        input.checked = true;' . PHP_EOL .
            '        card.classList.add("is-selected");' . PHP_EOL .
            '        updatePlacementFields();' . PHP_EOL .
            '    });' . PHP_EOL .
            '});' . PHP_EOL .
            'const placementInputs = document.querySelectorAll(\'input[name="placement_action"]\');' . PHP_EOL .
            'const publishSubmit = document.querySelector("[data-gf-publish-submit]");' . PHP_EOL .
            'const updatePlacementFields = function() {' . PHP_EOL .
            '    let selectedAction = "create_and_add_to_new_page";' . PHP_EOL .
            '    Array.prototype.forEach.call(placementInputs, function(input) {' . PHP_EOL .
            '        if (input.checked) {' . PHP_EOL .
            '            selectedAction = input.value;' . PHP_EOL .
            '        }' . PHP_EOL .
            '    });' . PHP_EOL .
            '    document.querySelectorAll("[data-gf-placement-fields]").forEach(function(group) {' . PHP_EOL .
            '        const isMatch = group.getAttribute("data-gf-placement-fields") === selectedAction;' . PHP_EOL .
            '        group.classList.toggle("is-hidden", !isMatch);' . PHP_EOL .
            '    });' . PHP_EOL .
            '    if (publishSubmit) {' . PHP_EOL .
            '        const defaultLabel = publishSubmit.getAttribute("data-gf-label-default") || "";' . PHP_EOL .
            '        const unpublishedLabel = publishSubmit.getAttribute("data-gf-label-unpublished") || defaultLabel;' . PHP_EOL .
            '        publishSubmit.textContent = selectedAction === "create_form_only" ? unpublishedLabel : defaultLabel;' . PHP_EOL .
            '    }' . PHP_EOL .
            '};' . PHP_EOL .
            'Array.prototype.forEach.call(placementInputs, function(input) {' . PHP_EOL .
            '    input.addEventListener("change", updatePlacementFields);' . PHP_EOL .
            '});' . PHP_EOL .
            'const targetTypeSelect = document.getElementById("gf-onboarding-placement-target-type");' . PHP_EOL .
            'const targetSelect = document.getElementById("gf-onboarding-placement-target-id");' . PHP_EOL .
            'const filterTargetOptions = function() {' . PHP_EOL .
            '    if (!targetTypeSelect || !targetSelect) {' . PHP_EOL .
            '        return;' . PHP_EOL .
            '    }' . PHP_EOL .
            '    const targetType = targetTypeSelect.value;' . PHP_EOL .
            '    Array.prototype.forEach.call(targetSelect.options, function(option) {' . PHP_EOL .
            '        const optionType = option.getAttribute("data-gf-target-type");' . PHP_EOL .
            '        if (!optionType) {' . PHP_EOL .
            '            option.hidden = false;' . PHP_EOL .
            '            return;' . PHP_EOL .
            '        }' . PHP_EOL .
            '        option.hidden = optionType !== targetType;' . PHP_EOL .
            '        if (option.hidden && option.selected) {' . PHP_EOL .
            '            targetSelect.value = "0";' . PHP_EOL .
            '        }' . PHP_EOL .
            '    });' . PHP_EOL .
            '};' . PHP_EOL .
            'if (targetTypeSelect && targetSelect) {' . PHP_EOL .
            '    targetTypeSelect.addEventListener("change", filterTargetOptions);' . PHP_EOL .
            '    filterTargetOptions();' . PHP_EOL .
            '}' . PHP_EOL .
            'updatePlacementFields();' . PHP_EOL;
    }
}
