import * as React from "react";

import * as ReactDOM from "react-dom";

import GanttControl from '../RQ_Components/GanttControl.jsx';

import FlexyGantt from '../RQ_Components/FlexyGantt.jsx';

// To get the name from the bounded list .

// Converter should be define globally using window

function initConverters() {

    window.nameConverter = function (flexyNodeData, value) {

        var data;

        // The grid calls this converter with flexyNodeData as a arg.

        if (flexyNodeData.Data)

            data = flexyNodeData.Data();

        // The grid calls this converter with flexyNodeData as a datacontext.

        else

            data = flexyNodeData;

        if (value == undefined) {

            if (data.Resource && data.Resource.ResourceName_M != undefined)

                return data.Resource.ResourceName_M();

            else

                return data["ActivityName"];

        }

        else {

            if (data.Resource && data.Resource.ResourceName_M != undefined)

                data.Resource.ResourceName_M(value);

            else

                data["ActivityName"] = value;

        }

        return;

    };

    // to get the short time format.

    var toolTipDateformat = Date.CultureInfo.formatPatterns.shortDate + '  ' + "HH:mm:ss";

    window.startTimeTooltipConverter = function (data) {

        if (data["PStartTime"])

            return data["PStartTime"].toString(toolTipDateformat);

        else if (data["StartTime"])

            return data["StartTime"].toString(toolTipDateformat);

        return null;

    }

    window.endTimeTooltipConverter = function (data) {

        if (data["PEndTime"])

            return data["PEndTime"].toString(toolTipDateformat);

        else if (data["EndTime"])

            return data["EndTime"].toString(toolTipDateformat);

        return null;

    }

}

// This samples renders the multiple react components in single page.

class MultiGantt extends React.Component {

     constructor() {

         super();

         this.anchorTime = new Date("2014-02-01T00:00:00-00:00");

         initConverters();

         this.columns = [{

            field: "Name",

            title: "Name",

            editor: RadiantQ.Default.Template.FlexyGanttExpandableTextBoxEditor("nameConverter"),

            template: RadiantQ.Default.Template.FlexyGanttExpandableTextBlockTemplate("nameConverter")

        }];

        this.TaskStartTimeProperty = "StartTime";

        this.ParentTaskStartTimeProperty = "PStartTime";

        this.TaskEndTimeProperty = "EndTime";

        this.ParentTaskEndTimeProperty = "PEndTime";

        this.TasksListProperty = "Tasks";

        this.pTemplate = "<div  class='rq-gc-parentBar'><div  class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='start-resizeThumb'></div><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle'></div><div class='rq-gc-parentBar-rightCue'></div></div>";

        // The template that defines the look for the task bars. "rq-gc-taskbar" is a built-in style that defines a default look for the task bars.

        this.tTemplate = "<div  class='rq-gc-taskbar'><div  class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='start-resizeThumb'></div></div>";

        this. TaskTooltipTemplate = "<div class='TaskTooltip'><div align='center'>Name: ${nameConverter(data)}</div><div><span>StartTime : ${startTimeTooltipConverter(data) }</span><br/><span>EndTime : ${endTimeTooltipConverter(data)}</span></div></div>";

    }

     GanttChartTemplateApplied(sender, args) {

        var $GanttChart = args.element;

        $GanttChart.GanttChart({ AnchorTime: this.anchorTime });

    }

     FlexyGanttChartTemplateApplied(sender, args) {

        var $FlexyGanttChart = args.element;

        $FlexyGanttChart.GanttChart({ AnchorTime: this.anchorTime });

     }

     render() {

        return (

               <div style={{ height: '600px' }}>        

                       <div style={{ height: '300px' }}>

                             <GanttControl

                               Url= './DataSource/GanttControlSkeleton.json'

                               ProjectStartDate={this.anchorTime}

                               TablePanelWidth={this.TablePanelWidth}

                               GanttChartTemplateApplied={(sender, args) => this.GanttChartTemplateApplied(sender, args)}

                           />

                     </div>

                      <div style={{ height: '250px' }}>

                             <FlexyGantt

                                Url='./DataSource/FlexyGanttSkeleton.json'

                               columns={this.columns}

                               resolverFunction={(data) => this.resolverFunction(data)}

                               GanttChartTemplateApplied={(sender, args) => this.FlexyGanttChartTemplateApplied(sender, args)}

                               TaskStartTimeProperty={this.TaskStartTimeProperty}

                               ParentTaskStartTimeProperty={this.ParentTaskStartTimeProperty}

                               TaskEndTimeProperty={this.TaskEndTimeProperty}

                               ParentTaskEndTimeProperty={this.ParentTaskEndTimeProperty}

                               TasksListProperty={this.TasksListProperty}

                               ParentTaskItemTemplate={this.pTemplate}

                               TaskItemTemplate={this.tTemplate}

                               TablePanelWidth={this.TablePanelWidth}

                               TaskTooltipTemplate={this.TaskTooltipTemplate}

                                       />

                               </div>

                       </div>

           );

    }

}

ReactDOM.render(<MultiGantt />, document.getElementById('container'));