{% set inheritedFrom = seomatic.helper.findInheritableBundle(parentBundles, "seoImage") %}
{% set hasInheritableValues = inheritedFrom is not null %}

{% set additionalVars = {
    'isInherited': seomatic.helper.isInherited(metaGlobalVars, "seoImage"),
    'fieldLabel': "SEO Image Source"|t("seomatic"),
    'labelFor': 'metaBundleSettings-seoImageSource',
    'wrapperClass': 'seomatic-imageSourceInnerWrapper',
    'settingName': 'seoImage'
} %}

{% embed "seomatic/settings/_includes/fields/_inheritableField.twig" with additionalVars %}
    {% macro entireSeoImageField(seoImageElement, elementType, imageOptions, field, assetFieldSources, imageCropModes, metaBundleSettings, metaGlobalVars, suffix, pageContext) %}
        <div class="field seomatic-imageSourceWrapper">
            <div class="field">
                {{ _self.seoImageField(seoImageElement, elementType, imageOptions, assetFieldSources, metaBundleSettings, metaGlobalVars, suffix, pageContext) }}
            </div>
            <div class="field seomatic-imageSourceNotFromUrl">
                {{ _self.seoImageTransformField(field, metaBundleSettings, suffix) }}
            </div>
            <div class="field seomatic-imageSourceNotFromUrl">
                {{ _self.seoImageTransformModeField(field, imageCropModes, metaBundleSettings, suffix) }}
            </div>
        </div>
    {% endmacro %}

    {% set imageOptions = {
        fromAsset: "Custom Image"|t("seomatic"),
        fromUrl: "Custom URL"|t("seomatic"),
    } %}

    {% if assetFieldSources is defined and assetFieldSources |length %}
        {% set imageOptions = { fromField: "From Asset Field"|t("seomatic"), } | merge(imageOptions) %}
    {% endif %}

    {% set imageCropModes = {
        "crop": "Crop"|t("seomatic"),
        "fit": "Fit"|t("seomatic"),
        "stretch": "Stretch"|t("seomatic"),
    } %}

    {% if pageContext == "field" %}
        {% set imageCropModes = { "": ""} | merge(imageCropModes) %}
    {% endif %}

    {% block inheritedValues %}
        {% set seoImageElement = [] %}
        {% set imageIds = inheritedFrom.metaBundleSettings.seoImageIds ?? metaBundleSettings.seoImageIds ?? null %}
        {% if imageIds %}
            {% set seoImageElement = craft.assets.id(imageIds).limit(1).all() %}
        {% endif %}

        {{ _self.entireSeoImageField(seoImageElement, elementType, imageOptions, field|default(null), assetFieldSources, imageCropModes, inheritedFrom.metaBundleSettings ?? metaBundleSettings, inheritedFrom.metaGlobalVars ?? metaGlobalVars, "-inherited", pageContext) }}
    {% endblock %}

    {% block field %}
        {% set seoImageElement = [] %}
        {% if metaBundleSettings.seoImageIds|length %}
            {% set seoImageElement = craft.assets.id(metaBundleSettings.seoImageIds).limit(1).all() %}
        {% endif %}

        {{ _self.entireSeoImageField(seoImageElement, elementType, imageOptions, field|default(null), assetFieldSources, imageCropModes, metaBundleSettings, metaGlobalVars, "", pageContext) }}
    {% endblock %}


    {# ############## SEO Image Macros ############## #}

    {% macro seoImageTransformModeField(field, imageCropModes, metaBundleSettings, suffix) %}
        <div class="field"
             {% if field is not null and 'seoImageTransformMode' not in field.generalEnabledFields %}style="display: none;"{% endif %}>
            <div class="heading">
                <label for="metaBundleSettings-seoImageTransformMode{{ suffix }}">
                    {{ "SEO Image Transform Mode"|t("seomatic") }}
                </label>
            </div>
            <div class="instructions">
                <p>{{ "The transform mode to use for the SEO Image Transform."|t("seomatic") }}</p>
            </div>
            {% import "_includes/forms" as forms %}

            {% namespace "metaBundleSettings" %}
                {{ forms.selectField({
                    id: "seoImageTransformMode" ~ suffix,
                    name: "seoImageTransformMode",
                    options: imageCropModes,
                    value: metaBundleSettings.seoImageTransformMode,
                    warning: false,
                    errors: metaBundleSettings.getErrors("seoImageTransformMode"),
                }) }}
            {% endnamespace %}
        </div>
    {% endmacro %}

    {% macro seoImageTransformField(field, metaBundleSettings, suffix) %}
        {% import "_includes/forms" as forms %}

        <div class="field"
             {% if field is not null and 'seoImageTransform' not in field.generalEnabledFields %}style="display: none;"{% endif %}>
            <div class="heading">
                <label for="metaBundleSettings-seoImageTransform{{ suffix }}">
                    {{ "Transform SEO Image"|t("seomatic") }}
                </label>
            </div>
            {% namespace "metaBundleSettings" %}
                {{ forms.lightswitchField({
                    id: "seoImageTransform" ~ suffix,
                    name: "seoImageTransform",
                    instructions: "Whether the SEO image should be automatically transformed to an appropriate file format and aspect ratio."|t("seomatic"),
                    on: metaBundleSettings.seoImageTransform,
                    warning: false,
                    errors: metaBundleSettings.getErrors("seoImageTransform"),
                }) }}
            {% endnamespace %}
        </div>
    {% endmacro %}

    {% macro seoImageField(seoImageElement, elementType, imageOptions, assetFieldSources, metaBundleSettings, metaGlobalVars, suffix, pageContext) %}
        <div class="instructions">
            <p>{{ "This is the image that will be used for display as the global website brand, as well as on Twitter Cards and Facebook OpenGraph that link to the website, if they are not specified."|t("seomatic") }}</p>
        </div>

        {% import "_includes/forms" as forms %}
        {% import "twigfield/twigfield" as twigfield %}

        {% namespace "metaBundleSettings" %}
            <div class="heading">
                {{ forms.select({
                    id: "seoImageSource" ~ suffix,
                    name: "seoImageSource",
                    options: imageOptions,
                    value: metaBundleSettings.seoImageSource,
                    class: "seomatic-imageSourceSelect",
                    errors: metaBundleSettings.getErrors("seoImageSource"),
                }) }}
            </div>
        {% endnamespace %}

        {% if assetFieldSources is defined and assetFieldSources |length %}
            {% namespace "metaBundleSettings" %}
                <div class="heading seomatic-imageSourceFromField">
                    <label
                        for="metaBundleSettings-seoImageField{{ suffix }}">{{ "Source Field: "|t("seomatic") }}</label>
                    {{ forms.select({
                        id: "seoImageField" ~ suffix,
                        name: "seoImageField",
                        options: assetFieldSources,
                        value: metaBundleSettings.seoImageField,
                        errors: metaBundleSettings.getErrors("seoImageField"),
                    }) }}
                </div>
            {% endnamespace %}
        {% endif %}

        {% namespace "metaBundleSettings" %}
            <div class="heading seomatic-imageSourceFromAsset">
                {{ forms.elementSelect({
                    id: "seoImageIds-" ~ random(),
                    name: "seoImageIds",
                    viewMode: "large",
                    elements: seoImageElement,
                    elementType: elementType,
                    criteria: {
                        kind: ["image"],
                    },
                    jsClass: 'Craft.AssetSelectInput',
                    selectionLabel: "Select SEO Image"|t("seomatic"),
                    sources: null,
                    limit: 1,
                    warning: false,
                    errors: metaBundleSettings.getErrors("seoImageIds"),
                }) }}
            </div>
        {% endnamespace %}

        {% namespace "metaGlobalVars" %}
            <div class="input ltr seomatic-imageSourceFromUrl">
                {% if pageContext != "field" %}
                    {{ twigfield.textField({
                        id: "seoImage" ~ suffix,
                        name: "seoImage",
                        value: metaGlobalVars.seoImage,
                        warning: false,
                        errors: metaGlobalVars.getErrors("seoImage"),
                    }, "SeomaticExpressionField", "monaco-editor-background-frame") }}
                {% else %}
                    {{ forms.text({
                        id: "seoImage" ~ suffix,
                        name: "seoImage",
                        value: metaGlobalVars.seoImage,
                        class: "nicetext",
                        warning: false,
                        errors: metaBundleSettings.getErrors("seoImage"),
                    }) }}
                {% endif %}
            </div>
        {% endnamespace %}
    {% endmacro %}
{% endembed %}