import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormControl,
  FormGroup,
  ValidatorFn,
  Validators,
} from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {
  debounceTime,
  map,
  merge,
  Observable,
  Subject,
  switchMap,
  takeUntil,
} from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';

import { User } from '../models/user';
import { UserService } from '../services/user.service';
import { ActivatedRoute } from '@angular/router';
import {
  GetMemberResponse,
  UpdateMemberForPasswordRequest,
  UpdateMemberForStateRequest,
  UpdateMemberRequest,
} from 'app/modules/proto/c2se/member_pb';
import { MemberModel, MemberState } from 'app/modules/proto/models/member_pb';
import { MemberService } from 'app/modules/polyglot/member/services/member.service';
import { MemberLevelService } from 'app/modules/polyglot/member_level/services/member_level.service';
import { BankService } from 'app/modules/polyglot/bank/services/bank.service';
import { MemberLevel } from 'app/modules/proto/models/member_level_pb';
import { Bank } from 'app/modules/proto/models/bank_pb';
import { SiteService } from 'app/modules/polyglot/site/services/site.service';
import { Site } from 'app/modules/proto/models/site_pb';
import { MatDrawer } from '@angular/material/sidenav';

import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseAlertType } from '@fuse/components/alert';
import { MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'user-view',
  templateUrl: './view.component.html',
  styles: [
    /* language=SCSS */
    `
      .user-view-grid {
        grid-template-columns: 48px auto 40px;

        @screen sm {
          grid-template-columns: 48px auto 112px 72px;
        }

        @screen md {
          grid-template-columns: 48px 112px auto 112px 72px;
        }

        @screen lg {
          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
        }
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: fuseAnimations,
})
export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
  @ViewChild(MatSort) private _sort!: MatSort;

  @ViewChild('drawer') drawer!: MatDrawer;
  drawerMode: 'over' | 'side' = 'side';
  drawerOpened: boolean = true;

  isLoading = false;
  searchInputControl = new FormControl();

  /* NONE: 0;
  NORMAL: 1;
  PENDING: 2;
  WITHDRAWAL: 3;
  DORMANCY: 4;
  BLACKLIST: 5;
  SUSPENDED: 6; */
  memberStateOptions = [
    {
      value: 1,
      label: '정상',
    },
    {
      value: 2,
      label: '대기',
    },
    {
      value: 3,
      label: '탈퇴',
    },
    {
      value: 4,
      label: '휴면',
    },
    {
      value: 5,
      label: '블랙',
    },
    {
      value: 6,
      label: '정지',
    },
  ];

  memberDefaultForm!: FormGroup;
  memberBankForm!: FormGroup;
  memberSettleForm!: FormGroup;
  memberGameSettingForm!: FormGroup;

  passwordConfirmConfigForm!: FormGroup;

  /* currentMember?: User; */
  currentMember?: MemberModel;

  panels: any[] = [];
  selectedPanel: string = 'accountInfo';

  memberLevels!: MemberLevel[];
  banks!: Bank[];
  sites!: Site[];

  alertConfig: { type: FuseAlertType; message: string } = {
    type: 'success',
    message: '비밀번호가 수정 되었습니다.',
  };

  changePasswordResultShowAlert: boolean = false;

  private _unsubscribeAll: Subject<any> = new Subject<any>();

  /**
   * Constructor
   */
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _changeDetectorRef: ChangeDetectorRef,
    private _fuseConfirmationService: FuseConfirmationService,
    private _fuseMediaWatcherService: FuseMediaWatcherService,
    private _formBuilder: FormBuilder,
    private _userService: UserService,
    private _memberService: MemberService,
    private _memberLevelService: MemberLevelService,
    private _bankService: BankService,
    private _siteService: SiteService
  ) {}

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void {
    this.memberDefaultForm = this._formBuilder.group({
      id: [''],
      username: [{ value: '', disabled: true }],
      signinPw: [''],
      signinPwConfirm: [''],
      nickname: [{ value: '', disabled: true }],
      ownCash: [''],
      mobilePhoneNumber: [''],
      levelId: [''],
      state: [''],
      isExcahngeMoney: [''],
      comp: [''],
      coupon: [''],
      recommender: [{ value: '', disabled: true }],
      siteId: [''],
      recommendCount: [''],
      hodingGameMoney: [{ value: '0', disabled: true }],
    });

    this.memberBankForm = this._formBuilder.group({
      bankId: [''],
      accountNumber: [''],
      accountHolder: [''],
      exchangePw: [''],
      description: [''],
    });

    this.memberSettleForm = this._formBuilder.group({
      bacaraRate: [],
      rulletRate: [],
      dragonRate: [],
      etcRate: [],
      slotRate: [],
      casinoRusingRate: [],
      slotRusingRate: [],
    });

    this.memberGameSettingForm = this._formBuilder.group({});

    this.passwordConfirmConfigForm = this._formBuilder.group({
      title: '알림',
      message: '비밀번호를 변경 하시겠습니까?',
      icon: this._formBuilder.group({
        show: true,
        name: 'heroicons_outline:exclamation',
        color: 'warn',
      }),
      actions: this._formBuilder.group({
        confirm: this._formBuilder.group({
          show: true,
          label: '확인',
          color: 'warn',
        }),
        cancel: this._formBuilder.group({
          show: true,
          label: '취소',
        }),
      }),
      dismissible: true,
    });

    this.panels = [
      {
        id: 'accountInfo',
        icon: 'heroicons_outline:user-circle',
        title: '기본정보',
        description: 'Manage your public profile and private information',
      },
      {
        id: 'bankInfo',
        icon: 'heroicons_outline:user-circle',
        title: '계좌정보',
        description: 'Manage your public profile and private information',
      },
      {
        id: 'settleInfo',
        icon: 'heroicons_outline:lock-closed',
        title: '정산설정',
        description: 'Manage your password and 2-step verification preferences',
      },
      {
        id: 'gameInfo',
        icon: 'heroicons_outline:credit-card',
        title: '게임설정',
        description:
          'Manage your subscription plan, payment method and billing information',
      },
      {
        id: 'historyInfo',
        icon: 'heroicons_outline:bell',
        title: '내역',
        description: "Manage when you'll be notified on which channels",
      },
    ];

    // Subscribe to media changes
    this._fuseMediaWatcherService.onMediaChange$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(({ matchingAliases }) => {
        // Set the drawerMode and drawerOpened
        if (matchingAliases.includes('lg')) {
          this.drawerMode = 'side';
          this.drawerOpened = true;
        } else {
          this.drawerMode = 'over';
          this.drawerOpened = false;
        }

        // Mark for check
        this._changeDetectorRef.markForCheck();
      });

    this._siteService
      .listSites()
      .then((result) => (this.sites = result.getSitesList()));
    this._memberLevelService.listMemberLevels().then((result) => {
      this.memberLevels = result
        .getMemberLevelsList()
        .filter((v) => !!v.getShow());
    });
    this._bankService
      .listBanks()
      .then((result) => (this.banks = result.getBanksList()));

    this._activatedRoute.data.subscribe((data) => {
      let member: GetMemberResponse.Result = data['member'];

      this.currentMember = member.getMember();

      console.log(this.currentMember?.getState());

      /* console.log('dddd', listMemberResult.getMembersList()); */
      this.memberDefaultForm.patchValue({
        username: this.currentMember?.getUsername(),
        signinPw: '',
        exchangePw: '',
        mobilePhoneNumber: this.currentMember?.getMobilePhoneNumber(),
        levelId: this.currentMember?.getMemberLevel()?.getId(),
        state: this.currentMember?.getState(),
        nickname: this.currentMember?.getNickname(),
        bankId: this.currentMember?.getBankAccount()?.getId(),
      });
      // Mark for check
      this._changeDetectorRef.markForCheck();
    });
  }

  /**
   * After view init
   */
  ngAfterViewInit(): void {}

  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next(null);
    this._unsubscribeAll.complete();
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Public methods
  // -----------------------------------------------------------------------------------------------------

  // -----------------------------------------------------------------------------------------------------
  // @ Private methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * Create product
   */
  __createProduct(): void {}

  /**
   * Toggle product details
   *
   * @param productId
   */
  __toggleDetails(productId: string): void {}

  /**
   * Track by function for ngFor loops
   *
   * @param index
   * @param item
   */
  __trackByFn(index: number, item: any): any {
    return item.id || index;
  }

  __modifyMember(): void {
    if (!this.currentMember?.getId()) {
      return;
    }

    const req = new UpdateMemberRequest();
    req.setId(this.currentMember?.getId());

    switch (this.selectedPanel) {
      case 'accountInfo':
        {
          const {
            username,
            signinPw,
            nickname,
            ownCash,
            mobilePhoneNumber,
            levelId,
            state,
            isExcahngeMoney,
            comp,
            coupon,
            siteId,
            hodingGameMoney,
          } = this.memberDefaultForm.value;

          if (!!levelId && levelId == '') {
            req.setMemberLevelId(levelId);
          }
          if (!!mobilePhoneNumber && mobilePhoneNumber == '') {
            req.setMobilePhoneNumber(mobilePhoneNumber);
          }
          if (!!siteId && siteId == '') {
            req.setSiteId(siteId);
          }
        }

        break;
      case 'bankInfo':
        {
          if (!this.memberBankForm.valid) {
            return;
          }
          const { exchangePw, accountHolder, accountNumber, description } =
            this.memberBankForm.value;

          const bank = new UpdateMemberRequest.BankAccount();
          const bankId = this.currentMember?.getBankAccount()?.getId();
          if (!!bankId) {
            bank.setId(bankId);
            bank.setAccountNumber(accountNumber);
            bank.setName(accountHolder);
          }
          req.setBankAccount(bank);
        }

        break;
      case 'settleInfo':
        break;
      case 'gameInfo':
        break;
      case 'historyInfo':
        break;
      default:
        break;
    }
    this._memberService.updateMember(req).then((result) => {
      console.log(result);
    });
  }

  /**
   * Navigate to the panel
   *
   * @param panel
   */
  goToPanel(panel: string): void {
    this.selectedPanel = panel;

    // Close the drawer on 'over' mode
    if (this.drawerMode === 'over') {
      this.drawer.close();
    }
  }

  /**
   * Get the details of the panel
   *
   * @param id
   */
  getPanelInfo(id: string): any {
    return this.panels.find((panel) => panel.id === id);
  }

  /**
   * Track by function for ngFor loops
   *
   * @param index
   * @param item
   */
  trackByFn(index: number, item: any): any {
    return item.id || index;
  }

  __changePassword(): void {
    const password = this.memberDefaultForm.get('signinPw')?.value as string;
    const passwordConfirm = this.memberDefaultForm.get('signinPwConfirm')
      ?.value as string;

    if (!password || !passwordConfirm) {
      this.changePasswordResultShowAlert = true;
      this.alertConfig = {
        type: 'error',
        message: '비밀번호를 입력하세요.',
      };
      this.closeChangePasswordAlert();
      return;
    }

    if (password !== passwordConfirm) {
      this.changePasswordResultShowAlert = true;
      this.alertConfig = {
        type: 'error',
        message: '비밀번호가 일치하지 않습니다.',
      };
      this.closeChangePasswordAlert();
      return;
    }

    const dialogRef = this._fuseConfirmationService.open(
      this.passwordConfirmConfigForm.value
    );

    /* const dialogRef = this._matDialog.open(AddComposeComponent); */

    dialogRef.afterClosed().subscribe((result) => {
      if (result === 'confirmed') {
        const req = new UpdateMemberForPasswordRequest();
        req.setPassword(password);
        req.setId(this.currentMember!.getId());
        this._memberService
          .updateMemberForPassword(req)
          .then((result) => {
            this.alertConfig = {
              type: 'success',
              message: '비밀번호가 수정 되었습니다.',
            };
            this.changePasswordResultShowAlert = true;
          })
          .catch((reson) => {
            this.changePasswordResultShowAlert = true;
            // Set the alert
            this.alertConfig = {
              type: 'error',
              message: '패스워드 변경이 실패하였습니다.',
            };
          })
          .finally(() => this.closeChangePasswordAlert());
      }
    });
  }

  onSelectionChangeLanguage(event: MatSelectChange) {
    const state = event.value;

    if (!state) {
      this.alertConfig = {
        type: 'error',
        message: '상태값이 선택 되지 않았습니다.',
      };
      this.closeChangePasswordAlert();
      return;
    }

    const req = new UpdateMemberForStateRequest();
    req.setId(this.currentMember!.getId());
    req.setState(state);

    this._memberService
      .updateMemberForState(req)
      .then((result) => {
        this.changePasswordResultShowAlert = true;
        this.alertConfig = {
          type: 'success',
          message: '회원 상태가 수정 되었습니다.',
        };
      })
      .catch((reson) => {
        this.changePasswordResultShowAlert = true;
        // Set the alert
        this.alertConfig = {
          type: 'error',
          message: '회원 상태 변경이 실패하였습니다.',
        };
      })
      .finally(() => this.closeChangePasswordAlert());
  }

  __changeMemberState(): void {
    const state = this.memberDefaultForm.get('state')?.value;
  }

  private closeChangePasswordAlert(): void {
    setTimeout(() => {
      this.changePasswordResultShowAlert = false;
      this._changeDetectorRef.markForCheck();
    }, 5000);
  }
}