import '@material/mwc-button'

import { html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('oauth2-decision-error')
class OAuth2DecisionErrorPage extends LitElement {
  @property({ type: Object }) data: any = {}
  @property({ type: Object }) user: any = {}
  @property({ type: Object }) domain: any = {}
  @property({ type: Object }) req: any = {}
  @property({ type: String }) redirectURI: string = ''
  @property({ type: String }) transactionID: string = ''

  render() {
    return html`
      <h2>Application Binding Error</h2>

      <p>Hi ${this.user.name}!</p>
      <p><b>Application Not Found</b></p>
      <p>You better check you give a correct client id (appKey)</p>

      <p>Company: ${this.domain.subdomain}</p>
      <p>Application Client ID : ${this.req.clientID}</p>
      <p>Redirect URI : ${this.redirectURI}</p>
      <p>State : ${this.req.state}</p>

      <form>
        <input name="transaction_id" value="${this.transactionID}" hidden />
        <input name="subdomain" type="text" value="${this.domain.subdomain}" hidden />
        <input name="appKey" value="${this.req.clientID}" hidden />
        <input name="scope" value="${this.req.scope}" hidden />
        <input name="state" type="text" value="${this.req.state}" hidden />
        <input name="email" type="text" value="${this.user.email}" hidden />

        <mwc-button raised @click="${() => history.back()}">Move back</mwc-button>
      </form>
    `
  }

  updated(changedProps) {
    if (changedProps.has('data')) {
      this.user = this.data?.oauth2?.user || this.user
      this.domain = this.data?.domain || this.domain
      this.req = this.data?.oauth2?.req || this.req
      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI
      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID
    }
  }
}
