import {
  Component,
  ChangeDetectorRef,
  ViewChild,
  ElementRef,
  OnInit,
  inject,
} from "@angular/core";

import { FormControl } from "@angular/forms";

import { SamFormService } from "../../../form-service";

import {
  SamFormControl,
  AccessorToken,
  ValidatorToken,
} from "../../../form-controls/sam-form-control";
import { KeyHelper } from "../../../utilities/key-helper/key-helper";
import { numberInputKeys } from "../number-input-keys";

@Component({
  selector: "sam-international-prefix",
  templateUrl: "international-prefix.template.html",
  providers: [
    AccessorToken(SamInternationalPrefix),
    ValidatorToken(SamInternationalPrefix),
  ],
  styles: [
    `
      .sam-international-prefix {
        text-align: right;
      }
    `,
  ],
  standalone: false,
})
export class SamInternationalPrefix extends SamFormControl implements OnInit {
  samFormService: SamFormService;
  cdr: ChangeDetectorRef;

  @ViewChild("input", { static: true }) public input: ElementRef;
  private keys: KeyHelper = new KeyHelper(...numberInputKeys);

  public min = 1;
  public max = 999;
  public inputValue: string = "1";
  public defaultValidators = [this.countryCodeValidator];

  protected defaultValue = "1";

  public get value(): string {
    return this._value;
  }
  onKeyInput(event: KeyboardEvent) {
    if (!this.keys.isAllowed(event)) {
      event.preventDefault();
      return;
    }
  }
  public set value(val: string) {
    this._value = val ? val : this.defaultValue;
    this.inputValue = this._value;
  }

  constructor() {
    const samFormService = inject(SamFormService);
    const cdr = inject(ChangeDetectorRef);

    super();

    this.samFormService = samFormService;
    this.cdr = cdr;
  }

  public ngOnInit() {
    super.ngOnInit();
    this.value = this.defaultValue;
    this.onChange(this.value);
  }

  public inputChange(event: Event) {
    const target = event.currentTarget as HTMLInputElement;
    this.value = target.value ? target.value : "1";

    this.onChange(this.value);
  }

  public validate(c: FormControl) {
    const errs = this.defaultValidators.map((fn) => fn(c)).filter((err) => err);

    return errs.length > 0 ? errs[0] : null;
  }

  public writeValue(val: string | null): void {
    this.value = val;
  }

  private countryCodeValidator(c: FormControl) {
    const regex: RegExp = /^[0-9]{1,3}$/g;
    const message = "Country codes must be 3 digits or fewer";

    return c && c.value && !c.value.toString().match(regex)
      ? { countryCode: { message: message } }
      : null;
  }
}