import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
import { IonButton, IonButtons, IonCardContent, IonContent, IonFooter, IonHeader, IonIcon, IonImg, IonInfiniteScrollContent, IonInput, IonItem, IonTextarea, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { atOutline, bookmarkOutline, chevronBackSharp, chevronForwardOutline, closeOutline, happyOutline, imageOutline, } from 'ionicons/icons';
import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
import { IonModal, } from '@ionic/angular/standalone'; // 导入独立组件
import { HwobsProvider } from './hwobs.service';
import { CustomHeaderComponent } from 'src/lib/component/custom-header/custom-header.component';

addIcons({ chevronBackSharp, imageOutline, atOutline, happyOutline, closeOutline, bookmarkOutline, chevronForwardOutline });
@Component({
  selector: 'app-send-post',
  templateUrl: './send-post.component.html',
  styleUrls: ['./send-post.component.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonItem,
    IonButton, IonIcon, IonButtons, IonInput, IonFooter, CommonModule,
    FormsModule, IonTextarea, IonModal, CustomHeaderComponent, IonImg, IonInfiniteScrollContent],
})
export class SendPostComponent implements OnInit {
  inputText: string = ''; // 用于绑定输入框的内容
  title: string = ''; // 帖子标题
  showLocationTag: boolean = true; // 控制标签是否显示
  remainingChars: number = 20; // 剩余字符数
  images: string[] = []; // 存储图片的数组
  tags: any = []; // 存储选中的标签
  isPost: boolean = false; // 帖子发布状态
  @Input() url: string = "";
  @Output() onUrlChange: EventEmitter<string> = new EventEmitter<string>()
  uploader: HwobsProvider | undefined
  async ngOnInit() {
    this.uploader = new HwobsProvider({
      bucketName: "nova-cloud",
      prefix: "dev/jxnu/storage/",
      host: "https://app.fmode.cn/",
      access_key_id: "XSUWJSVMZNHLWFAINRZ1",
      secret_access_key: "P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6"
    });
    await this.getTags(); // 获取所有标签
    this.getSixTags(); // 获取六个标签
  }
  constructor(private router: Router, private navCtrl: NavController) { }
  goBack() {
    this.navCtrl.back(); // 返回上一页
  }
  /**
   * @发帖操作函数
   * 
   */
  // 添加标签
  addTags(tag: any) {
    this.tags.push(tag); // 添加标签到 tags 数组中
    console.log(this.tags)
  }
  // 删除标签
  removeTags(tag: any) {
    this.tags = this.tags.filter((item: any) => item !== tag); // 从 tags 数组中删除指定标签
    console.log(this.tags);
  }
  // 添加图片
  uploadImage() {
    const fileInput = document.querySelector('input[type=file]') as HTMLInputElement;
    if (fileInput) {
      fileInput.click(); // 点击文件输入框
    }
  }
  //删除上传的图片
  removeImage(index: number) {//删除图片
    this.images.splice(index, 1); // 从数组中删除指定索引的图片
  }
  // 发布帖子
  async publishPost() {
    this.isPost = true;
    const post = new CloudObject('post');
    //tags数组中的每一个对象元素只取id和data属性
    for (let i = 0; i < this.tags.length; i++) {
      this.tags[i] = { id: this.tags[i].id, data: this.tags[i].data };
    }
    //设置帖子默认属性
    post.set({
      UserID: new CloudUser().toPointer(),
      content: this.inputText,
      title: this.title,
      image: this.images,
      tag: this.tags,
      like: 0,
    });
    // 保存帖子到数据库
    post.save().then(() => {
      console.log('帖子已发布');
      // 清空输入框和其他状态
      this.inputText = '';
      this.title = '';
      this.images = [];
      this.tags = [];
    }).catch((error: any) => {
      console.error('发布帖子时出错:', error);
    });
    // 标签数组中每一个id对应的tag的click加1，更新至数据库中
    let newTag = new CloudObject('tag');
    let query = new CloudQuery('tag');
    for (let i = 0; i < this.tags.length; i++) {
      console.log("正在更新第" + i + "/" + this.tags.length + "的点击数");
      const tagId = this.tags[i].id;
      console.log("正在更新" + tagId + "的点击数");

      // 根据标签ID查询对应的tag对象
      query.equalTo('objectId', tagId); // 设置查询条件为标签ID
      try {
        let result = await query.find();
        if (result.length === 0) {
          console.error("未找到对应的标签对象:", tagId);
          continue; // 如果没有找到对应的标签对象，则跳过当前迭代
        }
        let tag = result[0]; // 获取查询结果
        console.log("即将要修改：");
        console.log(tag);
        let click = tag.get('click') + 1; // 获取点击数并加一
        newTag.id = tagId; // 设置标签对象的 ID
        newTag.set({ click: click }); // 设置新的点击数
        try {
          await newTag.save(); // 保存更新后的标签对象
          console.log("更新成功" + tagId + "的点击数");
        } catch (saveError) {
          console.error("保存标签对象时出错:", saveError);
        }
      } catch (findError) {
        console.error("查询标签对象时出错:", findError);
      }
    }
    this.isPost = true; // 发布成功后，将 isPost 设置为 true
    this.goBack();
  }

  /**
   * @内置操作函数
   */
  //  删除位置标签
  removeLocationTag() {
    this.showLocationTag = false; // 设置为 false 隐藏标签
  }
  //  更新标题长度
  updateTitleLength() {
    this.remainingChars = 20 - this.title.length; // 更新剩余字符数
  }
  //获取全部标签列表
  allTags: any[] = [];
  async getTags() {
    let query = new CloudQuery('tag');
    let result = await query.find();
    this.allTags = result; // 将查询结果赋值给 tags 数组
    console.log("获取所有标签列表成功：")
    console.log(this.allTags);
  }
  //获取前六个标签
  sixTags: any[] = [];
  getSixTags() {
    this.sixTags = this.allTags?.slice(0, 6); // 获取前六个标签
    console.log("获取前六个标签成功：")
    console.log(this.sixTags);
  }
  file: File | undefined
  fileData: any = ""
  fileList: File[] = []
  // 上传文件
  async upload() {
    let filename = this.file?.name;
    let dateStr = `${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}`;
    let hourStr = `${new Date().getHours()}${new Date().getMinutes() + 1}${new Date().getSeconds()}`;
    let key = `${dateStr}/${hourStr}-${filename}`;
    // let key = `storage/${filename}`
    if (this.file) {
      let attachment = await this.uploader?.uploadFile(this.file, key);
      console.log(attachment);
      this.url = attachment?.get("url");
      console.log(this.url);
      this.onUrlChange.emit(this.url);
      console.log(this.url);
      this.images.push(this.url);
    }
  }
  /**
   * 文件选择器 选择文件触发事件
   * @param event 
   */
  async onFileChange(event: any) {
    console.log(event)
    // 将选择的文件列表，赋值给fileList
    this.fileList = event?.target?.files;
    // 默认将第一个文件，显示在展示区域
    this.setFile(event?.target?.files?.[0]);
    this.upload();
    this.fileList = [];
  }

  /**
   * 设置展示区域文件
   * @param file 
   */
  async setFile(file: any) {
    // 将文件设置为展示区域文件
    this.file = file
  }

  isEmojiPickerOpen: boolean = false; // 控制表情选择器的打开状态
  emojis: string[] = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '🫠', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘',
    '😗', '☺️', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🫣', '🤫', '🤔', '🫡', '🤐', '🤨', '😐',
    '😑', '😶', '🫥', '😶‍🌫️', '😏', '😒', '🙄', '😬', '😮‍💨', '🤥', '🫨', '🙂‍↔️', '🙂‍↕️', '😌', '😔', '😪', '🤤', '😴', '🫩', '😷',
    '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '😵‍💫', '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '😕', '🫤', '😟',
    '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺', '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓',
    '😩', '😫', '🥱', '😤', '😡', '😠', '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽', '👾', '🤖', '😺',
    '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '🙈', '🙉', '🙊', '💌', '💘', '❤️', '🖤', '💋', '💯', '💢', '💥', '💫',
    '💦', '💤']; // 表情数组
  // 打开表情选择器
  openEmojiPicker() {
    this.isEmojiPickerOpen = true;
  }
  // 关闭表情选择器
  closeEmojiPicker() {
    this.isEmojiPickerOpen = false; // 关闭模态框
  }
  // 添加表情到输入框
  addEmoji(emoji: string) {
    this.inputText += emoji; // 将选中的表情添加到输入框
  }

}