import { Component, effect, input, output, signal } from '@angular/core';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
import { SvgIcons } from '../../../../../svg-icons';
import { SingleEventDashboardCard } from '../single-event-dashboard-card/single-event-dashboard-card';
import { WORKFLOW_TYPE } from '../calendar-view';
import {
  SingleEventDashboardEventDetailsView
} from '../single-event-dashboard-event-details-view/single-event-dashboard-event-details-view';

@Component({
  selector: 'app-single-event-dashboard',
  imports: [
    DetailView,
    SingleEventDashboardCard,
    SingleEventDashboardEventDetailsView,
  ],
  templateUrl: './single-event-dashboard.html',
  styleUrl: './single-event-dashboard.css',
})
export class SingleEventDashboard {

  event = input<CalendarEventDto>();
  action = output<WORKFLOW_TYPE>();
  cards = signal<CardConfig[]>([]);


  constructor() {

    effect(() => {
      this.cards.set([
        {
          buttonTitle: 'Szerkesztés',
          title: 'Szerkesztés',
          svgIcon: SvgIcons.heorPencilSquare,
          description: 'Az esemény módosítása',
          workflow: 'event_edit',
        },

        this.event()?.isCancelled ?

          {
            buttonTitle: 'Aktiválás',
            title: 'Előfordulás aktiválása',
            svgIcon: SvgIcons.heroPlay,
            description: 'Az esemény  ezen előfordulásának aktiválása',
            workflow: 'event_activate',
          } :
          {
            buttonTitle: 'Lemondás',
            title: 'Előfordulás lemondása',
            svgIcon: SvgIcons.heroXcircle,
            description: 'Az esemény  ezen előfordulásának lemondása',
            workflow: 'event_cancel',
          },
        {
          buttonTitle: 'Törlés',
          title: 'Esemény törlése',
          svgIcon: SvgIcons.heroTrash,
          description: 'Az esemény  törlése',
          workflow: 'event_delete',
        },
        {
          buttonTitle: 'Megnézem',
          title: 'Foglalások',
          svgIcon: SvgIcons.heroUserGroup,
          description: 'Foglalások megtekintése',
          workflow: 'booking_list',
        },
        {
          buttonTitle: 'Bejelentkezés',
          title: 'Időpont foglalás',
          svgIcon: SvgIcons.heroUserPlus,
          description: 'Időpont foglalása eseményre',
          workflow: 'booking_create',
        },
        {
          buttonTitle: 'Lemondás',
          title: 'Lemondás',
          svgIcon: SvgIcons.heroUserMinus,
          description: 'Az időpont lemondása',
          workflow: 'booking_cancel',
        },
      ]);
    });
  }

  onCardAction(action: WORKFLOW_TYPE) {
    if (action) {
      this.action.emit(action);
    }
    console.info("card action", action);
  }


  protected readonly SvgIcons = SvgIcons;
}

export interface CardConfig {
  title?: string;
  description?: string;
  buttonTitle?: string;
  svgIcon?: string;
  workflow: WORKFLOW_TYPE;
}