<%
var
   id = ctrl.props.id,
   selector = app.suffix + '-' + id,
   useMatGrid  = false;
   isModal = (ctrl.props.window_type && ctrl.props.window_type == WindowType.Modal);
   showTitleBar = (ctrl.props.title_bar == null || ctrl.props.title_bar == true);
%>
<%= isUsingMatGrid(ctrl, theme); %>

import {Component} from '@angular/core';
<% if(!isModal) { %>
import {BaseTaskMagicComponent} from  "@magic-xpa/angular";;
<% } else {%>
import {BaseModalComponent} from  "@magic-xpa/angular";;
import {WindowType, WindowPosition} from '@magic-xpa/utils';
<%}%>
import { TaskMagicService, ComponentListService, CommandsCollector } from "@magic-xpa/angular";

<% if(useMatGrid) { %>
    <%- include(`../themes/table/grid/additionalIncludes`) %>
<%}%>

@Component({
    selector: '<%= selector %>',
    providers: [TaskMagicService],
    // styleUrls  : ['./<%- id %>.component.css'],
    templateUrl: './<%- id %>.component.html'
})

<% if(!isModal) { %>
export class <%- id %> extends BaseTaskMagicComponent
<% } else {%>
export class <%- id %> extends BaseModalComponent
<%}%>
{
    <% if(isModal) { %>
    private static readonly formName: string = "<%- id %>";
    private static readonly showTitleBar: boolean = <%- showTitleBar %>;
    private static readonly x: number = <%- (ctrl.coordinates.x == null) ? 0 : ctrl.coordinates.x %>;
    private static readonly y: number = <%- (ctrl.coordinates.x == null) ? 0 : ctrl.coordinates.y %>;
    private static readonly windowPosition: WindowPosition = <%- (ctrl.props.startup_position != null) ? ctrl.props.startup_position : WindowPosition.Customized %>;

    get X() {
        return <%- id %>.x;
    }

    get Y() {
        return <%- id %>.y;
    }

    get WindowPosition() {
        return <%- id %>.windowPosition;
    }

    get FormName() {
        return <%- id %>.formName;
    }

    get ShowTitleBar() {
        return <%- id %>.showTitleBar;
    }
    <%}%>

    <% if(useMatGrid) { %>
        <%- include(`../themes/table/grid/additionalComponentCode`, {ctrl: ctrl}) %>
    <%}%>
}


<%# A function used to decide if we need to use the material theme code or the basic HTML code.
material code is needed if we are in material design theme or if we have a table with the MatGrid style %>
<% function isUsingMatGrid(parent, theme) {                             %>
<%   if(parent.children){                                                          %>
<%       parent.children.forEach(child=> {                                         %>
<%           if(child.controlType === MgControlType.CTRL_TYPE_TABLE) {             %>
<%               if(typeof child.props.web_style === "undefined" ||
                     child.props.web_style === TableWebStyle.MatGrid) {            %>
<%                    useMatGrid = true;                                          %>
<%                    return;                                                      %>
<%               }                                                                 %>
<%           }                                                                     %>
<%       })                                                                        %>

<%        parent.children.forEach(child=> {                                        %>
<%            isUsingMatGrid(child);                                    %>
<%            if(useMatGrid);                                                     %>
<%                 return;                                                         %>
<%         })                                                                      %>
<%     }                                                                           %>
<% }                                                                               %>