import { Component, OnInit } from '@angular/core';
import { CupboardService } from '../../services/cupboard.service';
import { NeedListComponent } from '../need-list/need-list.component';
import { Need, GoalType } from '../../models/Need';

@Component({
  selector: 'app-cupboard',
  standalone: false,
  templateUrl: './cupboard.component.html',
  styleUrl: './cupboard.component.css'
})
export class CupboardComponent implements 
  OnInit {
  need: Need = {
    id: 0,
    name: '',
    maxGoal: 0,
    type: GoalType.MONETARY,
    filterAttributes: [],
    current: 0
  };

  
    constructor(private cupboardService: CupboardService) { }
    ngOnInit(): void {
      this.close();
    }
    
    open() {
      const formElement = document.getElementById('create-form');
      if (formElement) {
        formElement.style.visibility = 'visible';
        formElement.style.position = 'relative';
      }
      const buttonElement = document.getElementById('create-button');
      if (buttonElement) {
        buttonElement.style.visibility = 'hidden';
        buttonElement.style.position = 'absolute';
      }
    }

    close() {
      const formElement = document.getElementById('create-form');
      if (formElement) {
        formElement.style.visibility = 'hidden';
        formElement.style.position = 'absolute';
      }
      const buttonElement = document.getElementById('create-button');
      if (buttonElement) {
        buttonElement.style.visibility = 'visible';
        buttonElement.style.position = 'relative';
      }
    }

    submit(form: any) {
      console.log(form);
      this.need.name = form.name;
      this.need.id = form.id;
      this.need.maxGoal = form.maxGoal;
      this.need.type = GoalType[form.type as keyof typeof GoalType];
      console.log(this.cupboardService.createNeed(this.need));
    }
  }