import { IdpState } from '../idp.state.js';
import * as plugins from '../plugins.js';
import {
  customElement,
  DeesElement,
  property,
  state,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('idp-registration-stepper')
export class IdpRegistrationStepper extends DeesElement {
  public idpState = IdpState.getSingletonInstance();

  @state()
  private usedSubTemplate: TemplateResult;

  @state()
  private storedData = {
    validationTokenUrlParam: 'string',
    email: '',
    refreshToken: '',
    jwt: '',
    oneTimeTransferToken: '',
  };

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        height: 100px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }

      .main {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="main">
        ${this.usedSubTemplate
          ? this.usedSubTemplate
          : html`<dees-spinner size="60"></dees-spinner>`}
      </div>
    `;
  }

  public async firstUpdated() {
    await this.domtoolsPromise;
    this.domtools.router.on(`/finishregistration`, async (routeArg) => {
      this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
      if (!this.storedData.validationTokenUrlParam) {
        this.usedSubTemplate = html`
          You need a validation token, but we couldn't find one. Please contact workspace.global support.
        `;
        await this.domtools.convenience.smartdelay.delayFor(5000);
        this.usedSubTemplate = html` Redirecting you to workspace.global support... `;
        await this.domtools.convenience.smartdelay.delayFor(2000);
        window.location.href = 'https://support.workspace.global';
        return;
      }
      // lets verify the info;
      let tokenErrorMessage: string;
      const resAfterRegEmailClicked =
        await this.idpState.idpClient.requests.afterRegistrationEmailClicked
          .fire({
            token: this.storedData.validationTokenUrlParam,
          })
          .catch(
            (
              err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
            ) => {
              tokenErrorMessage = err.errorText;
              return;
            }
          );

      if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
        this.usedSubTemplate = html`
          the supplied validation token does not match any registration sessions.<br />
          ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
        `;
        await this.domtools.convenience.smartdelay.delayFor(5000);
        this.usedSubTemplate = html`redirecting you for further support... `;
        await this.domtools.convenience.smartdelay.delayFor(1000);
        window.location.href = 'https://support.workspace.global';
        return;
      } else {
        this.storedData.email = resAfterRegEmailClicked.email;
      }

      // lets continue with UI
      this.usedSubTemplate = html`<dees-stepper
        .steps=${[
          {
            title: 'What is your name?',
            content: html`
              <dees-form>
                <dees-input-text
                  key="email"
                  label="Your Email"
                  value="${this.storedData.email}"
                  disabled
                ></dees-input-text>
                <dees-input-text key="firstName" required label="First Name"></dees-input-text>
                <dees-input-text key="lastName" required label="Last Name"></dees-input-text>
                <dees-form-submit>Next</dees-form-submit>
              </dees-form>
            `,
            validationFunc: async (stepperArg, elementArg) => {
              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
                const response = await this.idpState.idpClient.requests.setData
                  .fire({
                    token: this.storedData.validationTokenUrlParam,
                    userData: {
                      name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
                      connectedOrgs: null,
                      email: null,
                      status: null,
                      username: null,
                    },
                  })
                  .catch(
                    (
                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                    ) => {
                      deesForm.setStatus('error', errArg.errorText);
                    }
                  );
                deesForm.setStatus('success', 'ok!');
                stepperArg.goNext();
              });
            },
            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
              const deesForm = stepElementArg.querySelector('dees-form');
              deesForm.setStatus('normal', 'Edit and Next');
            },
          },
          {
            title: 'What is your mobile number?',
            content: html`
              <dees-form>
                <dees-input-text
                  key="mobileNumber"
                  required
                  label="Your Mobile Number"
                ></dees-input-text>
                <dees-form-submit>Next</dees-form-submit>
              </dees-form>
            `,
            validationFunc: async (stepperArg, elementArg) => {
              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
                const response = await this.idpState.idpClient.requests.mobileNumberVerification
                  .fire({
                    token: this.storedData.validationTokenUrlParam,
                    mobileNumber: eventArg.detail.data.mobileNumber,
                  })
                  .catch(
                    (
                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                    ) => {
                      deesForm.setStatus('error', errArg.errorText);
                    }
                  );
                deesForm.setStatus('success', 'ok!');
                stepperArg.goNext();
              });
            },
            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
              const deesForm = stepElementArg.querySelector('dees-form');
              deesForm.setStatus('normal', 'Edit and Next');
            },
          },
          {
            title: 'What is the Verification Code?',
            content: html`
              <dees-form>
                <dees-input-text
                  key="verificationCode"
                  required
                  label="Verification Code"
                ></dees-input-text>
                <dees-form-submit>Next</dees-form-submit>
              </dees-form>
            `,
            validationFunc: async (stepperArg, elementArg) => {
              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
                const response = await this.idpState.idpClient.requests.mobileNumberVerification.fire({
                  token: this.storedData.validationTokenUrlParam,
                  verificationCode: eventArg.detail.data.verificationCode,
                });

                if (response.verficationCodeOk) {
                  deesForm.setStatus('success', 'ok!');
                  stepperArg.goNext();
                } else {
                  deesForm.setStatus('error', 'wrong code!');
                  await this.domtools.convenience.smartdelay.delayFor(3000);
                  deesForm.setStatus('normal', 'Retry And Next!');
                }
              });
            },
            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
              stepperArg.goBack();
              const deesForm = stepElementArg.querySelector('dees-form');
              deesForm.setStatus('normal', 'Next');
            },
          },
          {
            title: 'Create a secure password:',
            content: html`
              <dees-form>
                <dees-input-text
                  key="password"
                  required
                  label="Your New Secure Password"
                ></dees-input-text>
                <dees-form-submit>Next</dees-form-submit>
              </dees-form>
            `,
            validationFunc: async (stepperArg, elementArg) => {
              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
                const response = await this.idpState.idpClient.requests.setData.fire({
                  token: this.storedData.validationTokenUrlParam,
                  userData: {
                    username: null,
                    email: null,
                    name: null,
                    connectedOrgs: null,
                    status: null,
                    password: eventArg.detail.data.password,
                  },
                });
                const finishRegistrationResponse =
                  await this.idpState.idpClient.requests.finishRegistration.fire({
                    token: this.storedData.validationTokenUrlParam,
                  });
                deesForm.setStatus('pending', 'User created!');
                await this.domtools.convenience.smartdelay.delayFor(500);
                deesForm.setStatus('pending', 'Obtaining Refresh Token...');
                const loginResponse = await this.idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
                  {
                    username: this.storedData.email,
                    password: eventArg.detail.data.password,
                  }
                );
                this.storedData.refreshToken = loginResponse.refreshToken;

                deesForm.setStatus('pending', 'Obtaining JWT...');
                const jwtResponse = await this.idpState.idpClient.requests.obtainJwt.fire({
                  refreshToken: this.storedData.refreshToken,
                });

                deesForm.setStatus('pending', 'Obtaining Transfer Token...');
                await this.idpState.idpClient.setJwt(jwtResponse.jwt);
                await this.idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
              });
            },
          },
        ] as plugins.deesCatalog.IStep[]}
      ></dees-stepper>`;
      await this.domtools.convenience.smartdelay.delayFor(100);
    });
    this.domtools.router.on('/', async () => {
      this.usedSubTemplate = html`Hm, this is app is not meant for what you are trying to do :) `;
      await this.domtools.convenience.smartdelay.delayFor(2000);
      this.usedSubTemplate = html`Redirecting you now...`;
      window.location.href = `https://workspace.global`;
    });
    this.domtools.router._handleRouteState();
  }
}