import { Component } from '@angular/core';
import { TimelineModule } from 'primeng/timeline';
import { CardModule } from 'primeng/card';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';

@Component({
    standalone:true,
    imports: [
        CommonModule,
        TimelineModule,
        ButtonModule,
        CardModule
    ],
    template: `<div class="grid">
        <div class="col-12 md:col-6">
            <div class="card">
                <h5>Left Align</h5>
                <p-timeline [value]="events1">
                    <ng-template pTemplate="content" let-event>
                        {{event.status}}
                    </ng-template>
                </p-timeline>
            </div>
        </div>
        <div class="col-12 md:col-6">
            <div class="card">
                <h5>Right Align</h5>
                <p-timeline [value]="events1" align="right">
                    <ng-template pTemplate="content" let-event>
                        {{event.status}}
                    </ng-template>
                </p-timeline>
            </div>
        </div>
        <div class="col-12 md:col-6">
            <div class="card">
                <h5>Alternate Align</h5>
                <p-timeline [value]="events1" align="alternate">
                    <ng-template pTemplate="content" let-event>
                        {{event.status}}
                    </ng-template>
                </p-timeline>
            </div>
        </div>
        <div class="col-12 md:col-6">
            <div class="card">
                <h5>Opposite Content</h5>
                <p-timeline [value]="events1">
                    <ng-template pTemplate="content" let-event>
                        <small class="p-text-secondary">{{event.date}}</small>
                    </ng-template>
                    <ng-template pTemplate="opposite" let-event>
                        {{event.status}}
                    </ng-template>
                </p-timeline>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Customized</h5>
        <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
            <ng-template pTemplate="marker" let-event>
        <span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
            <i [ngClass]="event.icon"></i>
        </span>
            </ng-template>
            <ng-template pTemplate="content" let-event>
                <p-card [header]="event.status" [subheader]="event.date">
                    <img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
                    <p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                    <button pButton label="Read more" class="p-button-outlined mb-5"></button>
                </p-card>
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <h6>Top Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="top">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
        </p-timeline>

        <h6>Bottom Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="bottom">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
        </p-timeline>

        <h6>Alternate Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="alternate">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
            <ng-template pTemplate="opposite" let-event>
                &nbsp;
            </ng-template>
        </p-timeline>
    </div>`,
})
export class TimelineDoc {

    events1: any[] = [];

    events2: any[] = [];

    ngOnInit() {
        this.events1 = [
            {
                status: 'Ordered',
                date: '15/10/2020 10:30',
                icon: 'pi pi-shopping-cart',
                color: '#9C27B0',
                image: 'game-controller.jpg'
            },
            {
                status: 'Processing',
                date: '15/10/2020 14:00',
                icon: 'pi pi-cog',
                color: '#673AB7'
            },
            {
                status: 'Shipped',
                date: '15/10/2020 16:15',
                icon: 'pi pi-envelope',
                color: '#FF9800'
            },
            {
                status: 'Delivered',
                date: '16/10/2020 10:00',
                icon: 'pi pi-check',
                color: '#607D8B'
            }
        ];

        this.events2 = [
            "2020", "2021", "2022", "2023"
        ];
    }

}
