gist2.ts

import { Button } from "../general/button"
import { IInput } from "../general/iinput";
import { Widget } from "../helpers";
import { PhonePicker } from "./phone_picker"
import { BoostrapDateInput } from "../bootstrap/date";

export class WhatsappForm extends Widget {
    onback: () => void
    onregister: (number: string, birthdate: string) => void

    private form: HTMLDivElement
    private back: Button
    private ok: Button
    private input: PhonePicker
    private birthdateInput: BoostrapDateInput
    requireBirthdate: boolean = false


    constructor() {
        super("whatsappform")
        this.form = this.$("div.form")

        this.$("p", {lang: "PLEASE_PUT_YOUR_PHONE_NUMBER"})
        this.input = this.$(new PhonePicker("+49"))
        this.birthdateInput = this.$(new BoostrapDateInput('BIRTHDAY', 'BIRTHDAY_FORMAT_WHATSAPP', 12))
      
        this.input.onvalidate = (value) => {
          console.log('validate input')
          this.switchConfirmButton(this.validatePhone(value) && true)
        }

        var buttons = this.$("div.buttons.clearfix")

        this.back = new Button("BACK")
        this.back.addClass("back")
        this.back.onclick = () => this.onback()

        this.ok = new Button("CONFIRM")
        this.ok.addClass("ok")
        this.ok.onclick = () => this.onregister(this.getPhone(), this.getBirthdate())

        this.back.installTo(buttons)
        this.ok.installTo(buttons)

        console.log('twoja stara')

        this.input.installTo(this.form)
        this.birthdateInput.installTo(this.form)
        // this.form.appendChild(buttons)
        // to do zrobic normalny formularz... dodać normalne buttony. jebać zjebów co piszą taki syf.
        // buttons.installTo(this.form)
        this.validatePhone(this.getPhone())
    }

    validatePhone(phone) {
      console.log('phone: ', phone)
      return (/^\+[1-9]\d{9,12}$/.test(phone))
        // if (/^\+[1-9]\d{9,12}$/.test(phone)) {
        //     this.ok.enable()
        // } else {
        //     this.ok.disable()
        // }
    }

    switchConfirmButton(bool: boolean){
      bool ? this.ok.enable() : this.ok.disable()
    }

    getInput(): IInput {
        return this.input
    }

    getPhone(): string {
        return this.input.getValue()
    }

    getBirthdate() {
      return this.birthdateInput.getValue()
    }

    birthdateSettings(showBirthdate: boolean, requireBirthdate: boolean): void {
      if (!showBirthdate) {
        this.birthdateInput.remove()
      } else {
        this.birthdateInput.requireField = requireBirthdate
      }
    }

    getStyle() {
        return `
        .back {
            float:left;
        }

        .p_phone_picker {
            margin: 10px 0px 20px 0px;
        }

        .ok {
            float:right;
        }
        `
    }
}