import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {MatCardModule} from '@angular/material/card';
import {MatChipsModule} from '@angular/material/chips';
import {MatIcon} from '@angular/material/icon';
import {TranslatePipe, TranslateService} from '@ngx-translate/core';
import {ActivatedRoute} from '@angular/router';
import {AssetsConstants} from '../../constants/AssetsConstants';
import {MatDialog} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {ProjectDialogComponent} from './dialog/project-dialog.component';


export interface Projects {
  identifier: string;
  title: string,
  shortDescription: string,
  introduction: string,
  images: string[],
  icon: string,
  assets: string,
  link: string,
  bulletPoints: string[],
  isFeatured: boolean,
  technologies: string[]
}

@Component({
  selector: 'app-projects',
  imports: [
    MatCardModule,
    MatChipsModule,
    MatIcon,
    TranslatePipe,
    MatButtonModule
  ],
  templateUrl: './projects.component.html',
  styleUrl: './projects.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ProjectsComponent {

    private readonly route = inject(ActivatedRoute);
    private readonly dialog = inject(MatDialog);
    private readonly translateService = inject(TranslateService);

    allProjects: Projects[] = [
      {
        identifier: "playground",
        title: 'PROJECTS.PLAYGROUND.TITLE',
        shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
        introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
        images: [],
        icon: 'web',
        assets: '',
        link: 'https://andreas-dahm.eu',
        bulletPoints: [
          'PROJECTS.PLAYGROUND.BULLET_1',
          'PROJECTS.PLAYGROUND.BULLET_2',
          'PROJECTS.PLAYGROUND.BULLET_3',
          'PROJECTS.PLAYGROUND.BULLET_4',
        ],
        isFeatured: false,
        technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
      },
      {
        identifier: "elmucho",
        title: 'PROJECTS.EL_MUCHO.TITLE',
        shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
        introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
        images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
        icon: 'sports_esports',
        assets: '',
        link: 'https.store.steampowered.com/app/1532640/El_Mucho/',
        bulletPoints: [
          'PROJECTS.EL_MUCHO.BULLET_1',
          'PROJECTS.EL_MUCHO.BULLET_2',
          'PROJECTS.EL_MUCHO.BULLET_3',
          'PROJECTS.EL_MUCHO.BULLET_4',
        ],
        isFeatured: true,
        technologies: ['Unity', 'C#', 'Steamworks', 'Git']
      },
      {
        identifier: "gamejams",
        title: 'PROJECTS.GAME_JAMS.TITLE',
        shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
        introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
        images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
        icon: 'videogame_asset',
        assets: '',
        link: 'https.itch.io/c/6628860/lobos-collection',
        bulletPoints: [
          'PROJECTS.GAME_JAMS.BULLET_1',
          'PROJECTS.GAME_JAMS.BULLET_2',
          'PROJECTS.GAME_JAMS.BULLET_3',
          'PROJECTS.GAME_JAMS.BULLET_4',
        ],
        isFeatured: false,
        technologies: ['Unity', 'C#', 'Git']
      },
      {
        identifier: "diploma",
        title: 'PROJECTS.DIPLOMA.TITLE',
        shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
        introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
        images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
        icon: 'history_edu',
        assets: AssetsConstants.DIPLOMA,
        link: 'https.www.th-bingen.de',
        bulletPoints: [
          'PROJECTS.DIPLOMA.BULLET_1',
          'PROJECTS.DIPLOMA.BULLET_2',
          'PROJECTS.DIPLOMA.BULLET_3',
          'PROJECTS.DIPLOMA.BULLET_4',
        ],
        isFeatured: false,
        technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
      }
    ]

  featuredProject = computed(() => this.allProjects.find(p => p.isFeatured));
  otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured));


  constructor() {
    this.route.queryParamMap.subscribe(params => {
      // this.selectedKey.set(params.get('project'));
    });
  }

  openProjectDialog(project: Projects) {
    this.dialog.open(ProjectDialogComponent, {
      data: project,
      width: '90vw',
      maxWidth: '900px',
    });
  }
}
