import { Component, input } from '@angular/core';
import { OperationType } from '../../models/operation-type';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./task-history.service";
import * as i3 from "verben-ng-ui";
export class TaskHistoryComponent {
    _location;
    service;
    taskCode = input.required();
    operationType = OperationType;
    selectedDetail;
    showPopUp = false;
    active = 0;
    constructor(_location, service) {
        this._location = _location;
        this.service = service;
    }
    singleHistory = [
        {
            Date: '4:05 PM',
            Operation: OperationType.Comment,
            Details: {},
            Actions: [
                { Label: 'View Comments', Type: 'button', Action: 'viewComments' },
            ],
        },
        {
            Date: 'Yesterday',
            Operation: OperationType.Comment,
            Details: {},
            Actions: [
                { Label: 'View Comments', Type: 'button', Action: 'viewComments' },
            ],
        },
        {
            Date: 'Mar 2',
            Operation: OperationType.Forms,
            Details: {
                FilledBy: 'Anonymous',
            },
            Actions: [{ Label: 'View Form', Type: 'button', Action: 'viewForm' }],
        },
        {
            Date: 'Nov 4',
            Operation: OperationType.Assignment,
            Details: {
                From: 'John Doe',
                To: 'Jane Doe',
            },
            Actions: [],
        },
        {
            Date: 'Nov 6',
            Operation: OperationType.Comment,
            Details: {},
            Actions: [
                { Label: 'View Comments', Type: 'button', Action: 'viewComments' },
            ],
        },
    ];
    history = [];
    ngOnInit() {
        this.service.getTaskHistory(this.taskCode()).then((res) => {
            this.history = res;
            console.log(this.history);
        });
    }
    goBack() {
        this._location.back();
    }
    onPopUp(details) {
        this.showPopUp = true;
        this.selectedDetail = details;
    }
    offPopUp() {
        this.showPopUp = false;
        this.selectedDetail = null;
    }
    setActive(i) {
        this.active = i;
    }
    getTagsFromActor(actor) {
        return actor.Tags.map((tag) => tag.Name).join(', ');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskHistoryComponent, deps: [{ token: i1.Location }, { token: i2.TaskHistoryService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: TaskHistoryComponent, selector: "lib-task-history", inputs: { taskCode: { classPropertyName: "taskCode", publicName: "taskCode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"bg-[#F9FAFB]\">\n  <header\n    class=\"mx-8 rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n  >\n    <h4 class=\"font-semibold\">{{ taskCode() }}</h4>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'go-back'\"\n    ></verben-svg>\n  </header>\n  <section class=\"grid grid-cols-12\">\n    <div class=\"bg-[#fff] col-span-7 pl-16 pt-20 relative\">\n      <span\n        class=\"absolute block h-[90%] border border-secondary-200 left-[150px]\"\n      ></span>\n      <div *ngFor=\"let timeline of history; let i = index\">\n        <div>\n          <div class=\"flex mb-7\">\n            <h5 class=\"w-[100px] cursor-pointer\" (click)=\"setActive(i)\">\n              {{ timeline?.CreatedAt | date }}\n            </h5>\n            <div\n              class=\"ml-24 cursor-pointer min-w-[250px] p-6 rounded-md\"\n              [ngClass]=\"{\n                'after:absolute after:-left-[90px] after:top-0 bg-[#d3d3d32a] after:h-full relative after:border-l-2':\n                  active === i,\n                'border-none': active !== i\n              }\"\n              (click)=\"setActive(i)\"\n            >\n              <h4 class=\"font-bold text-lg\">{{ timeline.ActionType }}</h4>\n              <div *ngIf=\"timeline.Description\">\n                <p class=\"my-2 text-sm text-[#667085]\">\n                  Operation:{{ timeline.ActionType }} Added\n                </p>\n                <button\n                  class=\"flex gap-2 items-center w-fit text-[#667085] text-sm border px-3 py-1 rounded-lg bg-[#FCFCFD] mt-2 border-[#E4E7EC]\"\n                >\n                  <verben-svg\n                    [width]=\"15\"\n                    [height]=\"15\"\n                    [icon]=\"'chat'\"\n                  ></verben-svg>\n                  view comments\n                </button>\n              </div>\n              <div *ngIf=\"true\">\n                <p class=\"my-2 text-sm text-[#667085]\">Operation: {{ timeline.ActionType }}</p>\n                <div>\n                  <p class=\"text-sm\">\n                    <span class=\"text-[#667085]\">From</span>:<span\n                      class=\"ml-[3px] underline text-[#6172F3] cursor-pointer\"\n                      (mouseout)=\"offPopUp()\"\n                      (mouseover)=\"onPopUp(timeline.FromStage)\"\n                      >{{ timeline.FromStage }}</span\n                    >\n                  </p>\n                  <p class=\"text-sm mt-[4px]\">\n                    <span class=\"text-[#667085]\">To</span>:\n                    <span\n                      class=\"ml-[3px] underline text-[#6172F3] cursor-pointer\"\n                      (mouseout)=\"offPopUp()\"\n                      (mouseover)=\"onPopUp(timeline.ToStage)\"\n                      >{{ timeline.ToStage }}</span\n                    >\n                  </p>\n                  <verben-pop-Up\n                    [enableMouseLeave]=\"false\"\n                    [dropdownOpen]=\"showPopUp\"\n                  >\n                    <div\n                      dropdown-content\n                      class=\"bg-[#fff] z-[10000] border-primary border mt-2 p-6 rounded-lg w-[326px]\"\n                    >\n                      <div\n                        *ngIf=\"selectedDetail === timeline.FromStage\"\n                        class=\"\"\n                      >\n                        <div class=\"flex gap-4\">\n                          <div\n                            class=\"w-[50px] h-[50px] rounded-full bg-gradient-to-r from-[#D9AEAE] via-[#E3C79F] to-[#FFE681]\"\n                          ></div>\n                          <div>\n                            <p class=\"text-lg font-bold\">\n                              {{ timeline.FromStage }}\n                            </p>\n                            <p>{{ getTagsFromActor(timeline.Actor) }}</p>\n                          </div>\n                        </div>\n                        <!-- <p class=\"flex gap-3 mt-4\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'call'\"\n                          ></verben-svg>\n                          <span>+234- 123-456-6778</span>\n                        </p> -->\n                        <p class=\"flex gap-4 mt-2\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'mail'\"\n                          ></verben-svg>\n                          <span>{{ timeline.Actor.Identifier }}</span>\n                        </p>\n                      </div>\n                      <div *ngIf=\"selectedDetail === timeline.ToStage\" class=\"\">\n                        <div class=\"flex gap-4\">\n                          <div\n                            class=\"w-[50px] h-[50px] rounded-full bg-gradient-to-r from-[#D9AEAE] via-[#E3C79F] to-[#FFE681]\"\n                          ></div>\n                          <div>\n                            <p class=\"text-lg font-bold\">\n                              {{ timeline.ToStage }}\n                            </p>\n                            <p>{{ getTagsFromActor(timeline.Actor) }}</p>\n                          </div>\n                        </div>\n                        <!-- <p class=\"flex gap-3 mt-4\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'call'\"\n                          ></verben-svg>\n                          <span>+234- 123-456-6778</span>\n                        </p> -->\n                        <p class=\"flex gap-4 mt-2\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'mail'\"\n                          ></verben-svg>\n                          <span>{{ timeline.Actor.Identifier }}</span>\n                        </p>\n                      </div>\n                    </div>\n                  </verben-pop-Up>\n                </div>\n              </div>\n              <!-- <div *ngIf=\"timeline.Workflow\">\n                <p class=\"my-2 text-sm text-[#667085]\">\n                  Filled by: {{ timeline.Actor.Identifier }}\n                </p>\n                <button\n                  class=\"flex items-center gap-2 w-fit text-[#6172F3] text-sm border px-3 py-1 rounded-lg bg-[#FCFCFD] mt-2 border-[#E4E7EC]\"\n                >\n                  <verben-svg\n                    [width]=\"15\"\n                    [height]=\"15\"\n                    [icon]=\"'doc'\"\n                  ></verben-svg>\n                  View Forms\n                </button>\n              </div> -->\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-span-5\">\n      <div class=\"h-[50px] bg-[#fff]\"></div>\n      <div *ngIf=\"active >= 0\" class=\"w-[480px] pl-16 pt-10\">\n        <h1 class=\"font-bold text-lg py-2\">Comments</h1>\n        <p class=\"text-xs text-[#667085] text-right py-2\">\n          {{ history[active]?.CreatedAt | date }}\n        </p>\n        <div\n          class=\"bg-[#fff] text-[#101828] leading-relaxed p-8 shadow-md rounded-md\"\n        >\n          {{ history[active]?.Description }}\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskHistoryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-task-history', template: "<div class=\"bg-[#F9FAFB]\">\n  <header\n    class=\"mx-8 rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n  >\n    <h4 class=\"font-semibold\">{{ taskCode() }}</h4>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'go-back'\"\n    ></verben-svg>\n  </header>\n  <section class=\"grid grid-cols-12\">\n    <div class=\"bg-[#fff] col-span-7 pl-16 pt-20 relative\">\n      <span\n        class=\"absolute block h-[90%] border border-secondary-200 left-[150px]\"\n      ></span>\n      <div *ngFor=\"let timeline of history; let i = index\">\n        <div>\n          <div class=\"flex mb-7\">\n            <h5 class=\"w-[100px] cursor-pointer\" (click)=\"setActive(i)\">\n              {{ timeline?.CreatedAt | date }}\n            </h5>\n            <div\n              class=\"ml-24 cursor-pointer min-w-[250px] p-6 rounded-md\"\n              [ngClass]=\"{\n                'after:absolute after:-left-[90px] after:top-0 bg-[#d3d3d32a] after:h-full relative after:border-l-2':\n                  active === i,\n                'border-none': active !== i\n              }\"\n              (click)=\"setActive(i)\"\n            >\n              <h4 class=\"font-bold text-lg\">{{ timeline.ActionType }}</h4>\n              <div *ngIf=\"timeline.Description\">\n                <p class=\"my-2 text-sm text-[#667085]\">\n                  Operation:{{ timeline.ActionType }} Added\n                </p>\n                <button\n                  class=\"flex gap-2 items-center w-fit text-[#667085] text-sm border px-3 py-1 rounded-lg bg-[#FCFCFD] mt-2 border-[#E4E7EC]\"\n                >\n                  <verben-svg\n                    [width]=\"15\"\n                    [height]=\"15\"\n                    [icon]=\"'chat'\"\n                  ></verben-svg>\n                  view comments\n                </button>\n              </div>\n              <div *ngIf=\"true\">\n                <p class=\"my-2 text-sm text-[#667085]\">Operation: {{ timeline.ActionType }}</p>\n                <div>\n                  <p class=\"text-sm\">\n                    <span class=\"text-[#667085]\">From</span>:<span\n                      class=\"ml-[3px] underline text-[#6172F3] cursor-pointer\"\n                      (mouseout)=\"offPopUp()\"\n                      (mouseover)=\"onPopUp(timeline.FromStage)\"\n                      >{{ timeline.FromStage }}</span\n                    >\n                  </p>\n                  <p class=\"text-sm mt-[4px]\">\n                    <span class=\"text-[#667085]\">To</span>:\n                    <span\n                      class=\"ml-[3px] underline text-[#6172F3] cursor-pointer\"\n                      (mouseout)=\"offPopUp()\"\n                      (mouseover)=\"onPopUp(timeline.ToStage)\"\n                      >{{ timeline.ToStage }}</span\n                    >\n                  </p>\n                  <verben-pop-Up\n                    [enableMouseLeave]=\"false\"\n                    [dropdownOpen]=\"showPopUp\"\n                  >\n                    <div\n                      dropdown-content\n                      class=\"bg-[#fff] z-[10000] border-primary border mt-2 p-6 rounded-lg w-[326px]\"\n                    >\n                      <div\n                        *ngIf=\"selectedDetail === timeline.FromStage\"\n                        class=\"\"\n                      >\n                        <div class=\"flex gap-4\">\n                          <div\n                            class=\"w-[50px] h-[50px] rounded-full bg-gradient-to-r from-[#D9AEAE] via-[#E3C79F] to-[#FFE681]\"\n                          ></div>\n                          <div>\n                            <p class=\"text-lg font-bold\">\n                              {{ timeline.FromStage }}\n                            </p>\n                            <p>{{ getTagsFromActor(timeline.Actor) }}</p>\n                          </div>\n                        </div>\n                        <!-- <p class=\"flex gap-3 mt-4\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'call'\"\n                          ></verben-svg>\n                          <span>+234- 123-456-6778</span>\n                        </p> -->\n                        <p class=\"flex gap-4 mt-2\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'mail'\"\n                          ></verben-svg>\n                          <span>{{ timeline.Actor.Identifier }}</span>\n                        </p>\n                      </div>\n                      <div *ngIf=\"selectedDetail === timeline.ToStage\" class=\"\">\n                        <div class=\"flex gap-4\">\n                          <div\n                            class=\"w-[50px] h-[50px] rounded-full bg-gradient-to-r from-[#D9AEAE] via-[#E3C79F] to-[#FFE681]\"\n                          ></div>\n                          <div>\n                            <p class=\"text-lg font-bold\">\n                              {{ timeline.ToStage }}\n                            </p>\n                            <p>{{ getTagsFromActor(timeline.Actor) }}</p>\n                          </div>\n                        </div>\n                        <!-- <p class=\"flex gap-3 mt-4\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'call'\"\n                          ></verben-svg>\n                          <span>+234- 123-456-6778</span>\n                        </p> -->\n                        <p class=\"flex gap-4 mt-2\">\n                          <verben-svg\n                            [width]=\"17\"\n                            [height]=\"17\"\n                            [icon]=\"'mail'\"\n                          ></verben-svg>\n                          <span>{{ timeline.Actor.Identifier }}</span>\n                        </p>\n                      </div>\n                    </div>\n                  </verben-pop-Up>\n                </div>\n              </div>\n              <!-- <div *ngIf=\"timeline.Workflow\">\n                <p class=\"my-2 text-sm text-[#667085]\">\n                  Filled by: {{ timeline.Actor.Identifier }}\n                </p>\n                <button\n                  class=\"flex items-center gap-2 w-fit text-[#6172F3] text-sm border px-3 py-1 rounded-lg bg-[#FCFCFD] mt-2 border-[#E4E7EC]\"\n                >\n                  <verben-svg\n                    [width]=\"15\"\n                    [height]=\"15\"\n                    [icon]=\"'doc'\"\n                  ></verben-svg>\n                  View Forms\n                </button>\n              </div> -->\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-span-5\">\n      <div class=\"h-[50px] bg-[#fff]\"></div>\n      <div *ngIf=\"active >= 0\" class=\"w-[480px] pl-16 pt-10\">\n        <h1 class=\"font-bold text-lg py-2\">Comments</h1>\n        <p class=\"text-xs text-[#667085] text-right py-2\">\n          {{ history[active]?.CreatedAt | date }}\n        </p>\n        <div\n          class=\"bg-[#fff] text-[#101828] leading-relaxed p-8 shadow-md rounded-md\"\n        >\n          {{ history[active]?.Description }}\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.Location }, { type: i2.TaskHistoryService }] });
//# sourceMappingURL=data:application/json;base64, 