{% import '_includes/forms' as forms %}

{% set mode = field.editorMode ?? 'combined' %}

{{ forms.selectField({
    label: 'Editor Mode' | t('vizy'),
    instructions: 'Select the mode for the editor to use.' | t('vizy'),
    name: 'editorMode',
    value: field.editorMode,
    options: [
        { label: 'Blocks & Rich Text' | t('vizy'), value: 'combined' },
        { label: 'Rich Text Only' | t('vizy'), value: 'richText' },
        { label: 'Blocks Only' | t('vizy'), value: 'blocks' },
    ],
    toggle: true,
    targetPrefix: '.mode-',
    errors: field.getErrors('editorMode'),
}) }}

<div class="mode-richText mode-combined {{ mode == 'blocks' ? 'hidden' }}" style="margin-bottom: 24px !important;">
    {% set configInput %}
        <div class="flex">
            {{ forms.select({
                name: 'configSelectionMode',
                options: [
                    { label: 'Choose a config file' | t('vizy'), value: 'choose' },
                    { label: 'Enter a custom config' | t('vizy'), value: 'manual' }
                ],
                value: field.configSelectionMode,
                toggle: true,
                targetPrefix: '.csm-'
            }) }}

            {{ forms.select({
                id: 'vizyConfig',
                name: 'vizyConfig',
                class: ['csm-choose', field.configSelectionMode == 'manual' ? 'hidden'] | filter,
                options: vizyConfigOptions,
                value: field.vizyConfig,
            }) }}
        </div>
    {% endset %}

    {{ forms.field({
        label: 'Editor Config' | t('vizy'),
        id: 'config',
        instructions: 'You can save custom editor configs as `.json` files in `config/vizy/`, or you can enter a custom config.' | t('vizy') ~ ' <a href="https://verbb.io/craft-plugins/vizy/docs/get-started/configuration#editor-configuration" rel="noopener" target="_blank" class="go">' ~ 'View available settings' | t('vizy') ~ '</a>',
        required: true,
    }, configInput) }}

    {{ forms.textareaField({
        label: 'Custom Editor Config' | t('vizy'),
        instructions: 'The config must be entered as valid JSON.' | t('vizy'),
        fieldClass: ['csm-manual', field.configSelectionMode == 'choose' ? 'hidden'] | filter,
        class: ['code', 'ltr'],
        name: 'manualConfig',
        value: field.manualConfig,
        rows: 10,
        cols: 50,
        errors: field.getErrors('manualConfig'),
    }) }}
</div>

<div class="mode-blocks mode-combined {{ mode == 'richText' ? 'hidden' }}" style="margin-bottom: 24px !important;">
    <div class="field" aria-describedby="configurator">
        <div class="heading">
            <label id="label">{{ 'Block Configuration' | t('vizy') }}</label>
        </div>

        <div id="configurator" class="instructions">
            <p>{{ 'Define the types of blocks that can be created within this Vizy field, as well as the fields each block type is made up of.' | t('vizy') }}</p>
        </div>

        {% set fieldName = craft.app.view.namespaceInputName('fieldData') %}

        <div {{ attr({
            class: ['vizy-configurator', idPrefix ~ '-vizy-configurator'],
            'data-field-data': componentData.fieldData,
            'data-settings': componentData.settings,
        }) }}>
            <vizy-settings field-name="{{ fieldName }}" :errors="{{ field.getErrors() | json_encode }}"></vizy-settings>
        </div>
    </div>

    <hr>
</div>

{{ forms.textField({
    label: 'Initial Rows' | t('vizy'),
    instructions: 'Set the initial rows for the field. This indirectly controls the height of the field when no content has been added.' | t('vizy'),
    name: 'initialRows',
    value: field.initialRows,
    size: 2,
    errors: field.getErrors('initialRows'),
}) }}

<div class="mode-richText mode-combined {{ mode == 'blocks' ? 'hidden' }}" style="margin-bottom: 24px !important;">
    {{ forms.lightswitchField({
        label: 'Remove Empty Paragraphs' | t('vizy'),
        instructions: 'Whether empty paragraphs should be trimmed automatically from field output.' | t('vizy'),
        name: 'trimEmptyParagraphs',
        on: field.trimEmptyParagraphs,
        errors: field.getErrors('trimEmptyParagraphs'),
    }) }}

    {{ forms.lightswitchField({
        label: 'Plain Text Paste' | t('vizy'),
        instructions: 'Whether content pasted into the field should always be in plain text.' | t('vizy'),
        name: 'pasteAsPlainText',
        on: field.pasteAsPlainText,
        errors: field.getErrors('pasteAsPlainText'),
    }) }}

    <hr>
</div>

<div class="mode-blocks mode-combined {{ mode == 'richText' ? 'hidden' }}" style="margin-bottom: 24px !important;">
    {{ forms.selectField({
        label: 'Block Type Picker Behaviour' | t('vizy'),
        instructions: 'Select the behaviour for picking block types for the field.' | t('vizy'),
        name: 'blockTypeBehaviour',
        value: field.blockTypeBehaviour,
        options: [
            { label: 'Click' | t('vizy'), value: 'click' },
            { label: 'Hover' | t('vizy'), value: 'hover' },
        ],
        errors: field.getErrors('blockTypeBehaviour'),
    }) }}

    {{ forms.textField({
        label: 'Min Blocks' | t('vizy'),
        instructions: 'The minimum number of Vizy blocks the field must have.' | t('vizy'),
        name: 'minBlocks',
        value: field.minBlocks,
        size: 2,
        errors: field.getErrors('minBlocks'),
    }) }}

    {{ forms.textField({
        label: 'Max Blocks' | t('vizy'),
        instructions: 'The maximum number of Vizy blocks the field is allowed to have.' | t('vizy'),
        name: 'maxBlocks',
        value: field.maxBlocks,
        size: 2,
        errors: field.getErrors('maxlocks'),
    }) }}
</div>

<a class="fieldtoggle" data-target="asset-settings">{{ 'Asset Settings' | t('vizy') }}</a>

<div id="asset-settings" class="hidden">
    {% macro uploadLocationField(config) %}
        {% embed '_includes/forms/field.twig' with config %}
            {% block input %}
                {% import '_includes/forms.twig' as forms %}

                <div class="flex flex-nowrap">
                    <div>
                        {{ forms.select({
                            name: "#{config.name}Source",
                            options: config.sourceOptions,
                            value: config.sourceValue,
                            describedBy: describedBy,
                        }) }}
                    </div>
                </div>
            {% endblock %}
        {% endembed %}
    {% endmacro %}

    {{ _self.uploadLocationField({
        label: 'Default Upload Location' | t('app'),
        instructions: 'Where assets should be stored when they are uploaded directly to the field.' | t('app'),
        name: 'defaultUploadLocation',
        sourceOptions: sourceOptions,
        sourceValue: field.defaultUploadLocationSource,
        errors: field.getErrors('defaultUploadLocationSubpath'),
    }) }}

    {{ forms.checkboxField({
        label: 'Show unpermitted volumes' | t('app'),
        instructions: 'Whether to show volumes that the user doesn’t have permission to view.' | t('app'),
        id: 'showUnpermittedVolumes',
        name: 'showUnpermittedVolumes',
        checked: field.showUnpermittedVolumes,
    }) }}

    {{ forms.checkboxField({
        label: 'Show unpermitted files' | t('app'),
        instructions: 'Whether to show files that the user doesn’t have permission to view, per the “View files uploaded by other users” permission.' | t('app'),
        id: 'showUnpermittedFiles',
        name: 'showUnpermittedFiles',
        checked: field.showUnpermittedFiles,
    }) }}

    {{ forms.checkboxSelectField({
        id: 'availableVolumes',
        name: 'availableVolumes',
        label: 'Available Volumes' | t('vizy'),
        instructions: 'The volumes that should be available when selecting assets (if the selected config has an Image or File button).' | t('vizy'),
        options: volumeOptions,
        values: field.availableVolumes,
        showAllOption: volumeOptions | length ? true : false,
    }) }}

    {{ forms.checkboxSelectField({
        id: 'availableTransforms',
        name: 'availableTransforms',
        label: 'Available Transforms' | t('vizy'),
        instructions: 'The transforms that should be available when inserting images.' | t('vizy'),
        options: transformOptions,
        values: field.availableTransforms,
        showAllOption: transformOptions | length ? true : false,
    }) }}

    {{ forms.selectField({
        id: 'defaultTransform',
        name: 'defaultTransform',
        label: 'Default Transform' | t('vizy'),
        instructions: 'The default transform that should be applied when inserting images.' | t('vizy'),
        options: defaultTransformOptions,
        value: field.defaultTransform,
    }) }}
</div>

<hr>

{% if craft.app.db.isMysql %}
    <a class="fieldtoggle" data-target="advanced">{{ 'Advanced' | t('vizy') }}</a>

    <div id="advanced" class="hidden">
        {{ forms.selectField({
            label: 'Column Type' | t('vizy'),
            instructions: 'The type of column this field should get in the database.' | t('vizy'),
            id: 'column-type',
            name: 'columnType',
            options: [
                { value: 'text', label: 'text (~64KB)' },
                { value: 'mediumtext', label: 'mediumtext (~16MB)' },
                { value: 'longtext', label: 'longtext (~4GB)' },
            ],
            value: field.columnType,
            warning: (field.id ? "Changing this may result in data loss." | t('vizy')),
        }) }}
    </div>
{% endif %}