import {Component, inject, signal} from '@angular/core';
import {DmStorage, PictureStorage, ServiceManager} from '../../../service-manager';
import {ActivatedRoute, Router} from '@angular/router';
import {IndexedDB} from '../../../storage/indexed-db';
import {TUI_BREAKPOINT, TuiButton, TuiDialog, TuiIcon} from '@taiga-ui/core';
import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
import {Navbar} from '../../elements/navbar/navbar';
import {Oimg} from '../../elements/oimg/oimg';
import {Masonry} from '../../elements/masonry/masonry';
import {Album, Image} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
import {pictureHandlers} from '@chatenium/chatenium-sdk/mocks/handlers/picture.http';
import {TuiBlockStatusComponent} from '@taiga-ui/layout';
import {TranslatePipe} from '@ngx-translate/core';
import {TuiBadgedContentDirective} from '@taiga-ui/kit';

@Component({
  selector: 'app-see',
  imports: [
    Navbar,
    Oimg,
    TuiButton,
    TuiIcon,
    Masonry,
    TuiDialog,
    TuiBlockStatusComponent,
    TranslatePipe,
    TuiBadgedContentDirective
  ],
  templateUrl: './see.html',
  styleUrl: './see.scss',
})
export class See {
  serviceManager = inject(ServiceManager)
  route = inject(ActivatedRoute)
  indexedDb = inject(IndexedDB)
  breakpoint = inject(TUI_BREAKPOINT)
  router = inject(Router)

  uploaderId = ""
  openedAlbum: Album | null = null

  viewedPicture: Image | null = null
  get viewerOpen() {
    return this.viewedPicture != null
  }
  set viewerOpen(_: any) {
    this.viewedPicture = null
    this.router.navigate([], {
      queryParams: { pictureId: null },
      queryParamsHandling: "merge"
    })
  }

  get store(): PictureStorage {
    return this.serviceManager.pictureServices()[this.uploaderId]
  }

  enterAlbum(albumId: string) {
    this.router.navigate([], {
      queryParams: { albumId: albumId },
      queryParamsHandling: "merge"
    })
  }

  exitAlbum() {
    this.openedAlbum = null
    this.router.navigate([], {
      queryParams: { albumId: null },
      queryParamsHandling: "merge"
    })
  }

  viewPicture(picture: Image) {
    this.viewedPicture = picture
    this.router.navigate([], {
      queryParams: { pictureId: picture.imageId },
      queryParamsHandling: "merge"
    })
  }

  ngOnInit() {
    this.route.params.subscribe(async params => {
      const uploaderId = params['uploaderId'];
      this.uploaderId = uploaderId;

      const session = this.serviceManager.currentSession();
      if (!session) {
        return
      }

      if (!this.serviceManager.pictureServices()[uploaderId]) {
        const newService = new PictureService(
          session.token,
          uploaderId,
          session.userData.userid,
          this.indexedDb.getApi(),
        );

        const uploaderInfo = await newService.get()

        this.serviceManager.pictureServices.update(services => ({
          ...services,
          [uploaderId]: {
            albums: signal(uploaderInfo.pictures),
            uploaderData: signal(uploaderInfo.userData),
            service: newService,
          } as PictureStorage
        }));

        // Show album
        this.route.queryParams.subscribe(params => {
          const albumId = params['albumId'];
          if (albumId) {
            const album = uploaderInfo.pictures.find(a => a.albumId === albumId)
            if (album) {
              this.openedAlbum = album

              const pictureId = params['pictureId'];
              if (pictureId) {
                const picture = album.images.find(img => img.imageId === pictureId)
                if (picture) {
                  this.viewedPicture = picture
                }
              }
            }
          }
        })
      }
    });
  }

  protected readonly pictureHandlers = pictureHandlers;
}
