import {
  ChangeDetectorRef,
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';

import { CompComposeComponent } from 'app/modules/beteran/compose/compose/comp-compose.component';
import { CustomerComposeComponent } from 'app/modules/beteran/compose/compose/customer-compose.component';
import { DepositComposeComponent } from 'app/modules/beteran/compose/compose/deposit-compose.component';
import { DepositHistoryComposeComponent } from 'app/modules/beteran/compose/compose/deposit-history-compose.component';
import { NoticeComposeComponent } from 'app/modules/beteran/compose/compose/notice-compose.component';
import { SignInComposeComponent } from 'app/modules/beteran/compose/compose/sign-in-compose.component';
import { SignUpComposeComponent } from 'app/modules/beteran/compose/compose/sign-up-compose.component';
import { WithdrawComposeComponent } from 'app/modules/beteran/compose/compose/withdraw-compose.component';
import { WithdrawHistoryComposeComponent } from 'app/modules/beteran/compose/compose/withdraw-history-compose.component';
import { VendorService } from 'app/modules/polyglot/api/services/vendor.service';
import { Vendor } from 'app/modules/proto/models/api/vendor_pb';

export enum ComposeMenuType {
  signIn = 'signIn',
  signup = 'signup',
  signOut = 'signOut',
  deposit = 'Deposit',
  withdraw = 'Withdraw',
  notice = 'Notice',
  comp = 'Comp',
  customer = 'Customer',
  depositHistory = 'DepositHistory',
  withdrawHistory = 'WithdrawHistory',
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class HomeComponent implements OnInit {
  @Input()
  loggedIn: boolean = false;

  composeMenuType = ComposeMenuType;

  liveCasinos!: Vendor[];
  hotelCasinos!: Vendor[];
  slotGames!: Vendor[];

  components = [
    {
      id: 'ag(1)',
      name: '에볼루션',
      summary: 'Evolution',
      exampleSpecs: {
        prefix: 'autocomplete-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-autocomplete-testing.html',
        },
      ],
    },
    {
      id: 'allbet',
      name: '프라그메틱',
      summary: 'PragmaticPlay.',
      exampleSpecs: {
        prefix: 'badge-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-badge-testing.html',
        },
      ],
    },
    {
      id: 'elysium',
      name: '드림게이밍',
      summary: 'DreamGaming',
      exampleSpecs: {
        prefix: 'bottom-sheet-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-bottom-sheet-testing.html',
        },
      ],
    },
    {
      id: 'elysium',
      name: '마이크로게이밍',
      summary: 'MicroGaming',
      exampleSpecs: {
        prefix: 'button-',
        exclude: ['button-toggle-'],
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-button-testing.html',
        },
      ],
    },
    {
      id: 'evolution',
      name: '오리엔탈플러스',
      summary: 'OrientalPlus',
      exampleSpecs: {
        prefix: 'button-toggle-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-button-toggle-testing.html',
        },
      ],
    },
    {
      id: 'ezugi',
      name: '아시안게이밍',
      summary: 'AsiaGaming',
      exampleSpecs: {
        prefix: 'card-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-card-testing.html',
        },
      ],
    },
    {
      id: 'ezugi',
      name: 'CQ9LIVE',
      summary: 'CQ9LIVE',
      exampleSpecs: {
        prefix: 'checkbox-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-checkbox-testing.html',
        },
      ],
    },
    {
      id: 'ezugi',
      name: '이주기',
      summary: 'Ezugi',
      exampleSpecs: {
        prefix: 'chips-',
      },
      additionalApiDocs: [
        {
          name: 'Testing',
          path: 'material-chips-testing.html',
        },
      ],
    },

    // {
    //   id: 'ezugi',
    //   name: '비보카지노',
    //   summary: 'VIVO',
    //   exampleSpecs: {
    //     prefix: 'core-',
    //   },
    //   additionalApiDocs: [
    //     {
    //       name: 'Testing',
    //       path: 'material-core-testing.html',
    //     },
    //   ],
    // },
  ];

  data = {
    schedule: {
      today: [
        {
          title: '계좌 등록 안내',
          time: '2022-06-08',
        },
        {
          title: '오토프로그램 이용 안냐',
          time: '2022-06-08',
        },
        {
          title: '입출금 규정 안내',
          time: '2022-06-08',
        },
        {
          title: '원피(가상계좌)사용 안내',
          time: '2022-06-08',
        },
        {
          title: '입금문의 안내(필독)',
          time: '2022-06-08',
        },
      ],
    },
  };
  /**
   * Constructor
   */
  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _router: Router,
    private _matDialog: MatDialog,
    private _vendorService: VendorService
  ) {}

  ngOnInit(): void {
    this._vendorService.listVendors().then((result) => {
      this.liveCasinos = result
        .getVendorsList()
        .filter((v) => v.getCategory() === 'casino');

      this.hotelCasinos = result
        .getVendorsList()
        .filter((v) => v.getCategory() === 'casino');
      this.slotGames = result
        .getVendorsList()
        .filter((v) => v.getCategory() === 'slot');

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

  /**
   * @param composeMenuType
   */
  __onClickCompose(composeMenuType: ComposeMenuType): void {
    let selectType: any;

    if (
      !this.loggedIn &&
      composeMenuType !== ComposeMenuType.signIn &&
      composeMenuType !== ComposeMenuType.signup
    ) {
      alert('로그인 후 이용해주세요.');
      return;
    }
    switch (composeMenuType) {
      case ComposeMenuType.signOut:
        // selectType = SignInComposeComponent;
        return;
        break;
      case ComposeMenuType.signIn:
        selectType = SignInComposeComponent;
        break;
      case ComposeMenuType.signup:
        selectType = SignUpComposeComponent;
        break;
      case ComposeMenuType.deposit:
        selectType = DepositComposeComponent;
        break;
      case ComposeMenuType.withdraw:
        selectType = WithdrawComposeComponent;
        break;
      case ComposeMenuType.notice:
        selectType = NoticeComposeComponent;
        break;
      case ComposeMenuType.comp:
        selectType = CompComposeComponent;
        break;
      case ComposeMenuType.customer:
        selectType = CustomerComposeComponent;
        break;
      case ComposeMenuType.depositHistory:
        selectType = DepositHistoryComposeComponent;
        break;
      case ComposeMenuType.withdrawHistory:
        selectType = WithdrawHistoryComposeComponent;
        break;
    }

    const dialogRef = this._matDialog.open(selectType);

    dialogRef.afterClosed().subscribe((result) => {
      if (ComposeMenuType.signIn === composeMenuType && !!result.choice) {
        this._router.navigate(['game']);
      }
      console.log('Compose dialog was closed!');
    });
  }

  onClickGame(game: Vendor): void {
    console.log(game.toString());
    window.open(
      '/game/?vendor_key=pragmatic_casino&game_key=101',
      'gamepopup',
      'width=1400, height=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes'
    );
  }
}