import {
    animate,
    state,
    style,
    transition,
    trigger,
} from '@angular/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, Input, TemplateRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularSvgIconModule } from 'angular-svg-icon';

// components
import { CaCustomScrollbarComponent } from '../ca-custom-scrollbar/ca-custom-scrollbar.component';

@Component({
    selector: 'app-ca-modal',
    templateUrl: './ca-modal.component.html',
    styleUrls: ['./ca-modal.component.scss'],
    imports: [
        CommonModule,
        FormsModule,
        DragDropModule,
        AngularSvgIconModule,
        NgbModule,
        // components
        CaCustomScrollbarComponent,
    ],
    animations: [
        trigger('widthGrow', [
            state(
                'closed',
                style({
                    transform: 'scale(0)',
                })
            ),
            state(
                'open',
                style({
                    transform: 'scale(1)',
                })
            ),
            transition('closed => open', animate(100)),
        ]),
    ],
})
export class CaModalComponent {
    @Input() customClass: string = '';
    @Input() partClass: string = '';
    @Input() modalTitle: string = '';

    @Input() customHeaderTemplate!: TemplateRef<null>;
    @Input() headerSvgTemplate!: TemplateRef<null>;
    @Input() leftHeaderTemplate!: TemplateRef<null>;
    @Input() rightHeaderTemplate!: TemplateRef<null>;
    @Input() footerTemplate!: TemplateRef<null>;
    @Input() additionalPartTemplate!: TemplateRef<null>;
}