import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotGanttComponent, DayPilotModule} from "daypilot-pro-angular";
import {DataService} from "./data.service";

@Component({
  selector: 'gantt-component',
  standalone: true,
  template: `
    <div class="grid">
      <daypilot-gantt  #gantt></daypilot-gantt>
    </div>
  `,
  imports: [
    DayPilotModule
  ],
  styles: [`
    .grid {
      /*display: grid;*/
      /*grid-template-columns: 1fr;*/
      display: block;
      height: calc(100vh - 800px);
    }
  `]
})
export class GanttComponent implements AfterViewInit {

  @ViewChild("gantt")
  gantt!: DayPilotGanttComponent;

  config: DayPilot.GanttConfig = {
    heightSpec: "Parent100Pct",
    cellWidthSpec: "Fixed",
    cellWidth: 40,
    timeHeaders: [{"groupBy": "Month"}, {"groupBy": "Day", "format": "d"}],
    scale: "Day",
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    taskHeight: 30,
    rowHeaderHideIconEnabled: false,
    rowMoveHandling: "Update",
    rowHeaderWidthAutoFit: true,
    rowHeaderWidthAutoFitShrink: false,
    rowHeaderScrolling: true,
    taskMoveHandling: "Update",
    linkCreateHandling: "Update",
    rowCreateHandling: "Enabled",
    onRowMoved: (args) => {
      args.control.message("Row moved: " + args.source.text());
    },
    onTaskMoved: (args) => {
      args.control.message("Task moved to: " + args.newStart);
    },

    columns: [
      {
        title: 'x',
        property: 'columnOne',
      },
      {
        title: 'xx',
        property: 'columnTwo'
      },
      {
        title: 'xxx',
        property: 'columnThree'
      },
      {
        title: 'xxxx',
        property: 'columnFour'
      },
      {
        title: 'xxxxx',
        property: 'columnFive'
      }
    ],

    onLinkCreated: (args) => {
      args.control.message("Link created, type: " + args.type);
    },
    onRowCreate: (args) => {
      args.control.tasks.add(new DayPilot.Task({
          id: DayPilot.guid(),
          text: args.text,
          start: new DayPilot.Date().getDatePart(),
          end: new DayPilot.Date().getDatePart().addDays(1)
        }
      ));
    },
  };

  constructor(private ds: DataService
  ) {
  }

  ngAfterViewInit(): void {
    this.ds.getTasks().subscribe(result => this.config.tasks = result);
    this.ds.getLinks().subscribe(result => this.config.links = result);
    this.gantt.config = this.config;
  }

}

