import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Circulares } from '../../../Administrador/interfaces/Circulares.interface';

import { Router } from '@angular/router';
import { CircularesP } from '../../interfaces/CircularesP.interface';
import { MatDialog } from '@angular/material/dialog';
import moment from 'moment';


@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrl: './main.component.css'
})
export class MainComponent implements OnInit {

  public event: boolean = true;
  public mensajeBienvenida: string = '';
  public result: number = 0;
  public currentDate = new Date();
  public currentYear: any;
  public currentMonth: any;

  public today: any;
  public dias: string[] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
  public columnasCirculares: string[] = ['titulo', 'publicadaPor', 'estado', 'importancia', 'fechaPublicacion', 'acciones', 'adjuntos'];
  public titulos: string[] = ['Información General - visita', 'Pago de colegiaturas pendientes', 'Descarga Administrativa', 'Visita a Six Flags', 'Visita Educativa', 'Expo-Arte', 'Fotografía de Grupo'];
  public dataSourceCirculares = new MatTableDataSource<CircularesP>();
  public primerColorTitulos: string = '';
  public colorVinculos: string = '';
  public cardsMain = [
    { img: "assets/img/libro.png", texto: "Inscripciones", pendiente: true, url: "main" },
    { img: "assets/img/colegiatura.png", texto: "Colegiaturas", pendiente: true, url: "main" },
    { img: "assets/img/uniforme.png", texto: "Útiles", pendiente: false, url: "main" },
    { img: "assets/img/facturas.png", texto: "Facturas", pendiente: false, url: "main" },
    { img: "assets/img/hijos.png", texto: "Mis hijos", pendiente: true, url: "misHijos" },
  ]
  public weekDays: any[] = [];

  @ViewChild('paginador1') paginatorAct!: MatPaginator;
  @ViewChild('paginador2') paginatorCirc!: MatPaginator;

  constructor(
    private paginator: MatPaginatorIntl, private router: Router, public dialog: MatDialog
  ) {

    //paginador de la tabla en español
    const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) {
        return `0 de ${length}`;
      }
      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return `${startIndex + 1} - ${endIndex} de ${length}`;
    };
    this.paginator.nextPageLabel = "Siguiente";
    this.paginator.previousPageLabel = "Anterior";
    this.paginator.firstPageLabel = "Ir a la primer página";
    this.paginator.lastPageLabel = "Ir a la última página";
    this.paginator.itemsPerPageLabel = "Registros por página";
    this.paginator.getRangeLabel = spanishRangeLabel;
  }

  ngOnInit() {
    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
    this.primerColorTitulos = primerColorTitulos;
    let mensajeBienvenida: string = localStorage.getItem('mensajeBienvenida') || ''
    this.mensajeBienvenida = mensajeBienvenida;
    let colorVinculos: string = localStorage.getItem('colorVinculos') || ''
    this.colorVinculos = colorVinculos;

    this.weekNumber();
    this.currentMonthYear();
    this.days();
    this.tablaCirculares();

  }

  ngAfterViewInit(): void {

    this.dataSourceCirculares.paginator = this.paginatorCirc;
  }

  navegar(url: string) {
    this.router.navigate([`/homePadres/${url}`])
  }

  //data de la tabla de circulares
  tablaCirculares() {
    const data: CircularesP[] = [];
    const rowCount = 50;
    for (let i = 0; i < rowCount; i++) {
      const randomIndex = i % this.titulos.length;
      const randomTitulo = this.titulos[randomIndex];
      data.push({ titulo: randomTitulo, estado: 'No leído', importancia: 'Normal', publicadaPor: 'Dirección Escolar', fechaPublicacion: '01/08/2024 18:10:42', acciones: 'Leer', adjuntos: 'No Aplica' });
    }
    this.dataSourceCirculares.data = data;
    this.dataSourceCirculares.paginator = this.paginatorCirc;

  }

  //traer el número de la semana actual del año
  weekNumber() {
    let currentdate: any = new Date();
    let oneJan: any = new Date(currentdate.getFullYear(), 0, 1);
    let numberOfDays = Math.floor((currentdate - oneJan) / (24 * 60 * 60 * 1000));
    this.result = Math.ceil((currentdate.getDay() + 1 + numberOfDays) / 7);
  }

  //traer el mes actual
  currentMonthYear() {
    let currentDate = new Date();
    this.currentMonth = currentDate.toLocaleString('default', { month: 'long' });
    this.currentYear = currentDate.getFullYear();
  }

  //vista del calendario dependiendo el botón clickeado
  calendarView(vista: string) {
    let fecha = moment(new Date).format('YYYY-MM-DD');
    localStorage.setItem('vista', vista);
    localStorage.setItem('dia', fecha);
  }

  //día actual seleccionado
  selectedDay(dia: string) {
    localStorage.setItem('dia', dia)
  }



  //traer los días de la semana actual
  days() {
    const currentDate = new Date();
    this.today = currentDate.toISOString().split('T')[0];
    const currentDay = currentDate.getDay();

    const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
    const events = ['Sin Evento', 'Sin Evento', 'Clase Libre', 'Clase Libre', 'Sin Evento'];
    this.weekDays = [];

    let monday = currentDay - 1;
    if (monday < 0) {
      monday = 6;
    }

    for (let i = 0; i < 5; i++) {
      // const dia = (monday + i) % 7;
      const date = new Date();
      date.setDate(date.getDate() + i - monday);
      const objectDay = {
        day: days[i],
        event: events[i],
        num: date.getDate(),
        completeDate: date.toISOString().split('T')[0]
      };
      this.weekDays.push(objectDay);
    }


  }

  //modal circulares
  openDialog() {
    this.dialog.open(ModalCircular);
  }

}

//componente vista de la circular
@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './circular.component.html',
  styleUrl: './main.component.css'

})
export class ModalCircular {

}
