import { Component, Event, EventEmitter, Prop, State, Element } from '@stencil/core';
import { ISelfRegistrationInfo } from './selfRegistrationInfo';
import { getCountryName } from './../org-search/stateAndCountry';
import { IOrganizationInformation } from './../org-search-result/organizationInformation';

@Component({
    tag: 'confirm-self-registration-request',
    styleUrl: 'confirm-self-registration-request.scss',
    shadow: true
})
export class ConfirmSelfRegistrationRequest {
    @Prop() reviewHeader: string;
    @Prop() terms: string;
    @Prop({ reflectToAttr: true }) selfRegistrationInfo: ISelfRegistrationInfo;
    @State() termsAccepted: boolean = false;
    @Event({ bubbles: true, composed: true }) confirmEvent: EventEmitter;
    private timeout: any;
    @Element()
    private element: HTMLElement;

    getAddress(organization: IOrganizationInformation): string {
        const stateAndZip = [organization.orgState, organization.orgPostalCode]
            .filter(element => element)
            .map(element => element.trim())
            .join(' ');
        const addressLine = [organization.orgCity, stateAndZip];
        return addressLine
            .filter(element => element)
            .map(element => element.trim())
            .join(', ')
    };

    checkboxValueChanged(event): void {
        this.termsAccepted = event.target.checked;
    }

    onConfirmClick(event: Event) {
        event.preventDefault();
        this.confirmEvent.emit();
    }

    renderCaptcha()  {
        const recpatcha = window['grecaptcha'];
        console.log(typeof recpatcha.render);
        if (typeof recpatcha.render !== "function") {
            console.log('waiting till captcha is found');
            this.timeout = setInterval(() => {
                this.renderCaptcha();
              }, 200)
              return;
        }
        clearTimeout(this.timeout);
        recpatcha.render(this.element.querySelector('#captcha'), {
            sitekey: '6Lf_op4UAAAAANXxRYbfMkXbR4CnXwI520y9JiWc',

            callback: function(response){
                console.log('got cpatch response', response);
            }
        });
    }

    componentDidLoad() {
        this.renderCaptcha();
    }

    render() {
        return (
            <div class="login login-width" data-e2e-id="org-search">
                <div class="login__panel" data-e2e-id="org-search-panel">
                    <form class="register__form" data-e2e-id="org-search-form">
                        <h1 class="review-header">{this.reviewHeader}</h1>

                        <div class="info">
                            <span class="info__label">First Name</span>
                            <span class="info__value">{this.selfRegistrationInfo.firstName}</span>
                        </div>

                        <div class="info">
                            <span class="info__label">Last Name</span>
                            <span class="info__value">{this.selfRegistrationInfo.lastName}</span>
                        </div>

                        <div class="info">
                            <span class="info__label">School/District Email</span>
                            <span class="info__value">{this.selfRegistrationInfo.email}</span>
                        </div>

                        <div class="info">
                            <span class="info__label">I am an administrator for a</span>
                            <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgType}</span>
                        </div>

                        <div class="info">
                            <span class="info__label">School/District</span>
                            <div class="info__org">
                                <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgName}</span>
                                <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgAddress}</span>
                                <span class="info__value">{this.getAddress(this.selfRegistrationInfo.organizationInfo)}</span>
                                <span class="info__value">{getCountryName(this.selfRegistrationInfo.organizationInfo.orgCountry)}</span>
                            </div>
                        </div>


                        <slot></slot>
                        <div class="icon-error">
                            <span class="icon-error_intervention icon-error--alignment"></span>
                            <span class="icon__text">The following site is for educator use only.</span>
                        </div>

                        <div class="terms__container">
                            <input type="checkbox"
                                onChange={this.checkboxValueChanged.bind(this)}
                                name="terms"
                                value={this.terms}
                                id="terms"
                                checked={this.termsAccepted}/>
                            <label htmlFor="terms" class="terms__label">
                                <span class="terms__text">{this.terms}</span>
                            </label>
                        </div>

                        <div class="form__row">
                            <button
                                class="form__button"
                                data-e2e-id="confirm-back-button"
                                type="button"
                            >Back
                            </button>
                            <button
                                class="form__button form__button-right"
                                data-e2e-id="confirm-send-button"
                                type="button"
                                onClick={this.onConfirmClick.bind(this)}
                                disabled={!this.termsAccepted}
                            >Confirm and Send
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        );
    }

}