import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonApp,
  IonMenu,
  IonButtons,
  IonMenuButton,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent,
  IonList,
  IonItem,
  IonThumbnail,
  IonLabel,
  IonGrid,
  IonRow,
  IonCol,
  IonAlert,
  IonCard,
  IonCheckbox,
  IonInput,
  IonNavLink,
  IonButton,
  IonSearchbar,
  IonSegment,
  IonSegmentButton,
  ModalController,
  IonFab,
  IonFabButton,
  IonIcon,
} from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { TodoEditComponent } from '../component/todo-edit/todo-edit.component';
import { TodolistPageComponent } from '../page/todolist-page/todolist-page.component';
import { Router } from '@angular/router';
import { AiplanPageComponent } from '../page/aiplan-page/aiplan-page.component';
import { CloudQuery, CloudNews, CloudUser } from 'src/lib/cyxncloud';
import { CommonModule } from '@angular/common';
import { ModalBrowsePagePage } from '../page/modal/modal-browse-page/modal-browse-page.page';
import { DraggableButtonComponent } from '../component/draggable-button/draggable-button.component';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    ExploreContainerComponent,
    IonApp,
    IonMenu,
    IonButtons,
    IonButton,
    IonMenuButton,
    IonCard,
    IonCardHeader,
    IonCardTitle,
    IonCardSubtitle,
    IonCardContent,
    IonList,
    IonItem,
    IonThumbnail,
    IonLabel,
    IonGrid,
    IonRow,
    IonCol,
    IonAlert,
    TodoEditComponent,
    IonCheckbox,
    IonInput,
    IonNavLink,
    AiplanPageComponent,
    IonSearchbar,
    CommonModule,
    IonSegment,
    IonSegmentButton,
    IonFab,
    IonFabButton,
    IonIcon,
    DraggableButtonComponent,
  ],
})
export class Tab1Page implements OnInit {
  constructor(
    private router: Router,
    private el: ElementRef,
    private renderer: Renderer2,
    private modalCtrl: ModalController
  ) {
    this.getAllNews();
  }

  ngOnInit() {
    this.getAllNews();
    const button = this.el.nativeElement.querySelector('#draggable-button');
  }

  alertButtons = ['打卡'];
  duringday: number = 10;
  goodday: number = 20;
  badday: number = 5;
  todolist: Array<string> = ['have a good day'];
  sexChecked: boolean = false;

  // 查看页面详细信息
  async openModal(news: any) {
    const modal = await this.modalCtrl.create({
      component: ModalBrowsePagePage,
      componentProps: {
        newsData: news, // 将news数据传递给子组件
      },
    });
    modal.present();
  }

  // 横向导航栏
  navItems = [
    { label: '首页', link: '/home' },
    { label: '健康·生活', link: '/health' },
    { label: '社会', link: '/society' },
    { label: '法制', link: '/legal' },
    { label: '教育', link: '/education' },
    { label: '科普', link: '/science' },
    { label: '体育', link: '/physical' },
    { label: '文旅', link: '/cultural' },
  ];
  ngAfterViewInit() {
    // 在视图初始化之后动态生成导航按钮
    const navContainer = this.el.nativeElement.querySelector('.horizontal-nav');

    for (let i = 0; i < this.navItems.length; i++) {
      const item = this.navItems[i];

      const button = this.renderer.createElement('button');
      const text = this.renderer.createText(item.label);

      this.renderer.appendChild(button, text);

      this.renderer.addClass(button, 'nav-item');
      this.renderer.listen(button, 'click', () => this.navigateTo(item.link));

      this.renderer.appendChild(navContainer, button);
    }
  }

  // 跳转页面
  navigateTo(path: string) {
    this.router.navigate([`/tabs/${path}`]);
  }

  goodbody() {
    let allChange = document.querySelector('#allChange');
    if (allChange) {
      allChange.setAttribute('color', 'success');
    }
    this.goodday++;
    this.duringday++;
    this.sexChecked = true;
  }
  badbody() {
    let allChange = document.querySelector('#allChange');
    if (allChange) {
      allChange.setAttribute('color', 'danger');
    }
    this.badday++;
    this.duringday = 0;
    this.sexChecked = true;
  }
  changeTodolist(ev: any) {
    this.todolist = ev;
  }
  deleteThisTodolist(todo: string) {
    let idx = this.todolist.findIndex((item) => item === todo);
    this.todolist.splice(idx, 1);
  }

  // 首页新闻
  newslists: any[] = [];
  is_loading: boolean = true;

  async getAllNews() {
    let className = 'News';
    let newsQuery = new CloudQuery(className);
    let newslist = await newsQuery.getAll();
    this.newslists = newslist.results;

    this.newslists = newslist.results.map((news: any) => {
      // 删除所有空格，并替换换行符\n\n为</p><p>，并在开始和结束处添加<p>和</p>
      news.article =
        '<p>' +
        news.article.replace(/\n\n/g, '</p><p>').replace(/\s+/g, '') +
        '</p>';
      return news;
    });
    this.is_loading = false;
  }

  // test
  test() {
    let newsData = {
      author: new CloudUser().toPointer(),
      theme: '健康',
      title: 'hhhh',
    };
    console.log('newsData', newsData);

    let news = new CloudNews();
    let res = news.add(newsData);
  }
}