import { Component, OnInit } from '@angular/core';
import { FormControl, PatternValidator, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { CronOptions } from 'ngx-cron-editor';
import { ProfileService } from 'src/app/Services/profile.service';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { HelpDialogComponent } from './help-dialog/help-dialog.component';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
  userNameFormControl = new FormControl('', [Validators.required]);
  passwordFormControl = new FormControl('', [
    Validators.required,
    Validators.minLength(6),
  ]);
  telegramIdFormControl = new FormControl('', [Validators.required]);

  userId = '';

  form: any = {
    username: null,
    email: 'example@web.com',
    password: 'password',
  };

  constructor(
    private profileService: ProfileService,
    public dialog: MatDialog
  ) {}

  cronForm = new FormControl('0 0 1/1 * *');
  public cronOptions: CronOptions = {
    defaultTime: '00:00:00',

    hideMinutesTab: true,
    hideHourlyTab: true,
    hideDailyTab: false,
    hideWeeklyTab: true,
    hideMonthlyTab: true,
    hideYearlyTab: true,
    hideAdvancedTab: true,
    hideSpecificWeekDayTab: true,
    hideSpecificMonthWeekTab: true,

    use24HourTime: true,
    hideSeconds: true,

    cronFlavor: 'quartz', //standard or quartz
  };

  ngOnInit(): void {
    this.profileService.getUserData().subscribe((result) => {
      console.log(result);
      result = JSON.parse(result);
      this.form.username = result.data.username;
      this.form.password = result.data.password;
      this.form.email = result.data.email;
      this.userId = result.data.telegram_user_id;
    });
  }

  onSubmit() {
    if (this.userId != '') {
      console.log(this.userId);
      this.profileService.addTelegramId(this.userId).subscribe((result) => {
        console.log(result);
      });
    }
  }

  updateUser() {
    const { username, email, password } = this.form;
    this.profileService
      .updateProfile(this.form.username, this.form.password)
      .subscribe((result) => {
        console.log(result);
      });
  }

  openDialog(action: string) {
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      width: '50vw',
      height: '20vh',
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result === true) {
        if (action === 'addTelegram') {
          this.onSubmit();
        } else if (action === 'updateUser') {
          this.updateUser();
        }
      }
    });
  }

  setCronString() {
    this.profileService
      .addCronString(this.cronForm.value)
      .subscribe((result) => {
        console.log(result);
      });
  }

  openHelp() {
    const dialogRef = this.dialog.open(HelpDialogComponent, {
      width: '50vw',
      height: '20vh',
    });
  }
}