import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';

import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { NoticeOnelineService } from '../services/notice-oneline.service';
import { NoticeOneline } from '../models/notice-oneline';

@Component({
  selector: 'notice-oneline-redit',
  templateUrl: './redit.component.html',
  styles: [
    /* language=SCSS */
    `
      .inventory-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 ReditComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
  @ViewChild(MatSort) private _sort!: MatSort;

  isLoading = false;
  searchInputControl = new FormControl();
  noticeOnelineForm!: FormGroup;
  editMode: boolean = false;

  noticeType = NOTICE_ONELINE_TYPE;
  siteType = SITE_NOTICE_ONELINE_TYPE;
  useOrNotType = USE_OR_NOT_NOTICE_ONELINE_TYPE;

  noticeOneline!: NoticeOneline;

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

  /**
   * Constructor
   */
  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _fuseConfirmationService: FuseConfirmationService,
    private _formBuilder: FormBuilder,
    private _route: ActivatedRoute,
    private _router: Router,
    private _noticeOnelineService: NoticeOnelineService
  ) {}

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

  /**
   * On init
   */
  ngOnInit(): void {
    // Create the contact form
    this.noticeOnelineForm = this._formBuilder.group({
      writer: ['관리자'],
      noticeType: [''],
      useOrNot: [''],
      widthSize: [''],
      site: [''],
      title: [''],
      writerDate: [''],
      views: ['0'],
      content: [''],
    });

    this._noticeOnelineService.noticeOneline$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe((noticeOneline: NoticeOneline | undefined) => {
        if (!noticeOneline) {
          return;
        }

        this.noticeOneline = noticeOneline;
        this.noticeOnelineForm.patchValue(noticeOneline);

        // 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
  // -----------------------------------------------------------------------------------------------------

  __onClickeCancel(): void {
    /* let url: string = 'board/customer-template/';
    this._router.navigateByUrl(url); */
  }
  __onClickReditBtn(noticeOneline: NoticeOneline): void {
    console.log('click: ', noticeOneline);
  }

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

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

  /**
   * Toggle edit mode
   *
   * @param editMode
   */
  toggleEditMode(editMode: boolean | null = null): void {
    if (editMode === null) {
      this.editMode = !this.editMode;
    } else {
      this.editMode = editMode;
    }

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

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

export const NOTICE_ONELINE_TYPE = [
  {
    key: '0',
    value: '흐르는공지',
  },
];

export const SITE_NOTICE_ONELINE_TYPE = [
  {
    key: '0',
    value: '--전체--',
  },
];

export const USE_OR_NOT_NOTICE_ONELINE_TYPE = [
  {
    key: '0',
    value: '사용(노출)',
  },
  {
    key: '1',
    value: '미사용',
  },
];