import { html } from 'lit';
import { api } from '@converse/headless';
import { __ } from 'i18n';
import tplSwitchForm from './switch_form.js';

/**
 * @param {import('../form').default} el
 */
export default (el) => {
    const i18n_choose_provider = __('Choose a different provider');
    const i18n_legend = __('Account Registration:');
    const i18n_register = __('Register');
    const registration_domain = api.settings.get('registration_domain');

    return html`
        <form id="converse-register" class="converse-form rounded" @submit=${(ev) => el.onFormSubmission(ev)}>
            <legend class="col-form-label">${i18n_legend} ${el.domain}</legend>
            <p class="title">${el.title}</p>
            <p class="form-help instructions">${el.instructions}</p>
            <div class="form-errors hidden"></div>
            ${el.form_fields}

            <fieldset class="buttons form-group">
                ${el.fields ? html` <input type="submit" class="btn btn-primary" value="${i18n_register}" /> ` : ''}
                ${registration_domain
                    ? ''
                    : html`
                          <input
                              type="button"
                              class="btn btn-secondary button-cancel"
                              value="${i18n_choose_provider}"
                              @click=${(ev) => el.renderProviderChoiceForm(ev)}
                          />
                      `}
                ${tplSwitchForm()}
            </fieldset>
        </form>
    `;
};
