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

<h1>User Settings</h1>

{{ forms.selectField({
  label: 'Permission Type',
  instructions: "Choose whether to have one schema for all users, or a schema per user group.",
  name: 'permissionType',
  id: 'permissionType',
  value: settings.permissionType,
  options: [
    { label: 'Single Schema', value: 'single' },
    { label: 'Multiple Schemas', value: 'multiple' },
  ],
  required: true,
}) }}

{{ forms.field({
  label: 'Allow Magic Authentication',
  instructions: "Whether or not the Magic Code mutations should be available.",
  name: 'allowMagicAuthentication',
}, forms.lightswitch({
  name: 'allowMagicAuthentication',
  on: settings.allowMagicAuthentication,
})) }}

{% if craft.app.plugins.isPluginEnabled('two-factor-authentication') %}
  {{ forms.field({
    label: 'Allow Two-Factor Authentication',
    instructions: "Whether or not the Two-Factor mutations should be available.",
    name: 'allowTwoFactorAuthentication',
  }, forms.lightswitch({
    name: 'allowTwoFactorAuthentication',
    on: settings.allowTwoFactorAuthentication,
  })) }}
{% endif %}

{{ forms.field({
  label: 'Allow Passwordless Account Deletion',
  instructions: "When enabled, the plugin will no longer validate a user's password when using the `deleteAccount` mutation.",
  name: 'allowPasswordlessDelete',
}, forms.lightswitch({
  name: 'allowPasswordlessDelete',
  on: settings.allowPasswordlessDelete,
})) }}

{{ forms.field({
  label: 'Skip Activated Check',
  instructions: "When enabled, the plugin will no longer validate a user's activation status on incoming requests.",
  name: 'skipActivatedCheck',
}, forms.lightswitch({
  name: 'skipActivatedCheck',
  on: settings.skipActivatedCheck,
})) }}

{% if settings.permissionType == 'single' %}
  <hr/>

  {% set schemaInput = schemaOptions ? forms.selectField({
      name: 'schemaName',
      value: settings.schemaName,
      options: schemaOptions,
    }) : tag('p', {
      class: ['warning', 'with-icon'],
      text: 'No schemas exist yet.'|t('app'),
    })
  %}

  {{ forms.field({
    label: 'GraphQL Schema',
    instructions: 'The schema that JWTs will be assigned to through the `authenticate` and `register` mutations.',
    name: 'schemaName',
    required: true,
  }, schemaInput) }}

  {{ forms.field({
    label: 'Allow Registration',
    instructions: "Whether or not the `register` mutation should be available.",
    name: 'allowRegistration',
  }, forms.lightswitch({
    name: 'allowRegistration',
    on: settings.allowRegistration,
  })) }}

  {{ forms.selectField({
    label: 'User Group',
    instructions: 'The user group that users will be assigned to when created through the `register` mutation.',
    name: 'userGroup',
    value: settings.userGroup,
    options: userOptions,
  }) }}


  {% if siteOptions|length > 2 %}
    {{ forms.selectField({
      label: 'Site',
      instructions: 'The site users will be restricted to querying/mutating.',
      name: 'siteId',
      value: settings.siteId,
      options: siteOptions,
    }) }}
  {% endif %}

  {% if not settings.schemaName %}
    {{ forms.field({
      label: 'User Permissions',
      instructions: 'Select your desired schema and save to modify user permissions.',
    }, '') }}
  {% else %}
    {% if entryQueries %}
      <div class="field">
        <div class="heading">
          <label>Restricted Entry Queries</label>

          <div class="instructions">
            <p>Choose which sections are limited so that authenticated users can only query their own entries. Only sections allowed in your schema will show here.</p>
          </div>
        </div>

        <div class="input">
          {% for query in entryQueries %}
            <div>
              {{ forms.checkbox({
                label: query.label,
                name: 'entryQueries[' ~ query.handle ~ ']',
                value: true,
                checked: settings.entryQueries[query.handle] ?? false,
              }) }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if entryMutations %}
      <div class="field">
        <div class="heading">
          <label>Restricted Entry Mutations</label>

          <div class="instructions">
            <p>Choose which sections are limited so that authenticated users can only mutate their own entries. Only sections allowed in your schema will show here.</p>
          </div>
        </div>

        <div class="input">
          {% for mutation in entryMutations %}
            <div>
              {{ forms.checkbox({
                label: mutation.label,
                name: 'entryMutations[' ~ mutation.handle ~ ']',
                value: true,
                checked: settings.entryMutations[mutation.handle] ?? false,
              }) }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if assetQueries %}
      <div class="field">
        <div class="heading">
          <label>Restricted Asset Queries</label>

          <div class="instructions">
            <p>Choose which volumes are limited so that authenticated users can only query their own assets. Only volumes allowed in your schema will show here.</p>
          </div>
        </div>

        <div class="input">
          {% for query in assetQueries %}
            <div>
              {{ forms.checkbox({
                label: query.label,
                name: 'assetQueries[' ~ query.handle ~ ']',
                value: true,
                checked: settings.assetQueries[query.handle] ?? false,
              }) }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if assetMutations %}
      <div class="field">
        <div class="heading">
          <label>Restricted Asset Mutations</label>

          <div class="instructions">
            <p>Choose which volumes are limited so that authenticated users can only mutate their own assets. Only volumes allowed in your schema will show here.</p>
          </div>
        </div>

        <div class="input">
          {% for mutation in assetMutations %}
            <div>
              {{ forms.checkbox({
                label: mutation.label,
                name: 'assetMutations[' ~ mutation.handle ~ ']',
                value: true,
                checked: settings.assetMutations[mutation.handle] ?? false,
              }) }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  {% endif %}
{% else %}
  {% for userGroup in userOptions %}
    {% if userGroup.label != '-' %}
      <hr/>
      <h2>{{ userGroup.label }}</h2>

      {% set groupKey = 'group-' ~ userGroup.value %}

      {% set schemaInput = schemaOptions ? forms.selectField({
          name: 'granularSchemas[' ~ groupKey ~ '][schemaName]',
          value: settings.granularSchemas[groupKey].schemaName ?? null,
          options: schemaOptions,
        }) : tag('p', {
          class: ['warning', 'with-icon'],
          text: 'No schemas exist yet.'|t('app'),
        })
      %}

      {{ forms.field({
        label: 'GraphQL Schema',
        instructions: 'The schema that JWTs will be assigned to through the `authenticate` and `register` mutations.',
        name: 'schemaName',
      }, schemaInput) }}

      {{ forms.field({
        label: 'Allow Registration',
        instructions: "Whether or not the `register` mutation should be available.",
        name: 'granularSchemas[' ~ groupKey ~ '][allowRegistration]',
      }, forms.lightswitch({
        name: 'granularSchemas[' ~ groupKey ~ '][allowRegistration]',
        on: settings.granularSchemas[groupKey].allowRegistration ?? null,
      })) }}

      {% if siteOptions|length > 2 %}
        {{ forms.selectField({
          label: 'Site',
          instructions: 'The site that this user group will be restricted to querying/mutating.',
          name: 'granularSchemas[' ~ groupKey ~ '][siteId]',
          value: settings.granularSchemas[groupKey].siteId ?? null,
          options: siteOptions,
        }) }}
      {% endif %}

      {% if not settings.granularSchemas[groupKey].schemaName ?? null %}
        {{ forms.field({
          label: 'User Permissions',
          instructions: 'Select your desired schema and save to modify user permissions.',
        }, '') }}
      {% else %}
        {% if entryQueries[groupKey] is defined %}
          <div class="field">
            <div class="heading">
              <label>Restricted Entry Queries</label>

              <div class="instructions">
                <p>Choose which sections are limited so that authenticated users can only query their own entries. Only sections allowed in your schema will show here.</p>
              </div>
            </div>

            <div class="input">
              {% for query in entryQueries[groupKey] %}
                <div>
                  {{ forms.checkbox({
                    label: query.label,
                    name: 'granularSchemas[' ~ groupKey ~ '][entryQueries][' ~ query.handle ~ ']',
                    value: true,
                    checked: settings.granularSchemas[groupKey].entryQueries[query.handle] ?? null,
                  }) }}
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}

        {% if entryMutations[groupKey] is defined %}
          <div class="field">
            <div class="heading">
              <label>Restricted Entry Mutations</label>

              <div class="instructions">
                <p>Choose which sections are limited so that authenticated users can only mutate their own entries. Only sections allowed in your schema will show here.</p>
              </div>
            </div>

            <div class="input">
              {% for mutation in entryMutations[groupKey] %}
                <div>
                  {{ forms.checkbox({
                    label: mutation.label,
                    name: 'granularSchemas[' ~ groupKey ~ '][entryMutations][' ~ mutation.handle ~ ']',
                    value: true,
                    checked: settings.granularSchemas[groupKey].entryMutations[mutation.handle] ?? null,
                  }) }}
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}

        {% if assetQueries[groupKey] is defined %}
          <div class="field">
            <div class="heading">
              <label>Restricted Asset Queries</label>

              <div class="instructions">
                <p>Choose which volumes are limited so that authenticated users can only query their own assets. Only volumes allowed in your schema will show here.</p>
              </div>
            </div>

            <div class="input">
              {% for query in assetQueries[groupKey] %}
                <div>
                  {{ forms.checkbox({
                    label: query.label,
                    name: 'granularSchemas[' ~ groupKey ~ '][assetQueries][' ~ query.handle ~ ']',
                    value: true,
                    checked: settings.granularSchemas[groupKey].assetQueries[query.handle] ?? null,
                  }) }}
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}

        {% if assetMutations[groupKey] is defined %}
          <div class="field">
            <div class="heading">
              <label>Restricted Asset Mutations</label>

              <div class="instructions">
                <p>Choose which volumes are limited so that authenticated users can only mutate their own assets. Only volumes allowed in your schema will show here.</p>
              </div>
            </div>

            <div class="input">
              {% for mutation in assetMutations[groupKey] %}
                <div>
                  {{ forms.checkbox({
                    label: mutation.label,
                    name: 'granularSchemas[' ~ groupKey ~ '][assetMutations][' ~ mutation.handle ~ ']',
                    value: true,
                    checked: settings.granularSchemas[groupKey].assetMutations[mutation.handle] ?? null,
                  }) }}
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

<script>
  const usersForm = document.getElementById('main-form');
  const permissionType = document.getElementById('settings-permissionType');
  permissionType.addEventListener('change', () => usersForm.submit());
</script>