import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ProfileContext, PropertyType } from '@aztrix/models';
import { AbstractRegisterStep } from '../abstract-register-step';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/legacy-radio";
import * as i4 from "../../step-switch/step-switch.component";
import * as i5 from "@aztrix/helpers";
export class RegisterAccountTypeStepComponent extends AbstractRegisterStep {
    constructor() {
        super(...arguments);
        this.selectionForm = new FormControl();
        this.options = ['personal', 'professional', 'company', 'non-profit'];
    }
    ngOnInit() {
        this.typeForm.markAsTouched();
        this.organisationTypeForm.get('value').markAsTouched();
        if (this.typeForm.value === ProfileContext.INDIVIDUAL) {
            this.selectionForm.setValue('personal');
        }
        else {
            this.selectionForm.setValue(this.organisationTypeForm.get('value').value);
        }
        this.selectionForm.valueChanges.subscribe((value) => {
            const valueForm = this.organisationTypeForm.get('value');
            if (value === 'personal') {
                this.typeForm.setValue(ProfileContext.INDIVIDUAL);
                valueForm.setValue('');
                valueForm.markAsUntouched();
            }
            else {
                this.typeForm.setValue(ProfileContext.ORGANISATION);
                valueForm.setValue(value);
            }
        });
    }
    get typeForm() {
        return this.form.get('type');
    }
    get organisationTypeForm() {
        return this.propertiesForm.get(PropertyType.ORGANISATION_TYPE);
    }
}
RegisterAccountTypeStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RegisterAccountTypeStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
RegisterAccountTypeStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RegisterAccountTypeStepComponent, selector: "ax-register-account-type-step", usesInheritance: true, ngImport: i0, template: "<mat-radio-group class=\"radios\" [formControl]=\"selectionForm\">\n  <mat-radio-button\n    class=\"radio\"\n    [ngClass]=\"{selected: selectionForm?.value === option}\"\n    *ngFor=\"let option of options\"\n    [value]=\"option\"\n  >\n    {{ 'property.organisation-type.' + option | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<span class=\"account-type-context\">{{\n  'register.account-type.' + selectionForm.value + '.explanation' | translate\n}}</span>\n\n<ax-step-switch (continue)=\"_continue()\" (back)=\"_back()\"></ax-step-switch>\n", styles: [".radios{display:flex;flex-wrap:wrap;gap:1rem}.radio{display:block;background-color:#fff;border-radius:10px;padding:.5rem;border:1px solid white}.radio.selected{border:1px solid var(--font-color)}.account-type-context{font-size:.625rem;color:#fff;min-height:75px}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.StepSwitchComponent, selector: "ax-step-switch", inputs: ["loading$"], outputs: ["continue", "back"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RegisterAccountTypeStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-register-account-type-step', template: "<mat-radio-group class=\"radios\" [formControl]=\"selectionForm\">\n  <mat-radio-button\n    class=\"radio\"\n    [ngClass]=\"{selected: selectionForm?.value === option}\"\n    *ngFor=\"let option of options\"\n    [value]=\"option\"\n  >\n    {{ 'property.organisation-type.' + option | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<span class=\"account-type-context\">{{\n  'register.account-type.' + selectionForm.value + '.explanation' | translate\n}}</span>\n\n<ax-step-switch (continue)=\"_continue()\" (back)=\"_back()\"></ax-step-switch>\n", styles: [".radios{display:flex;flex-wrap:wrap;gap:1rem}.radio{display:block;background-color:#fff;border-radius:10px;padding:.5rem;border:1px solid white}.radio.selected{border:1px solid var(--font-color)}.account-type-context{font-size:.625rem;color:#fff;min-height:75px}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 