import * as React from "react";

import * as ReactDOM from "react-dom";

import FlexyGantt from 'RQSrc/React_Components/FlexyGantt.jsx';

import './FlexyGanttSkeleton.css';

// 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["TName"] != undefined)

                return data["TName"];

            else if (data["RName"] != undefined)

                return data["RName"];

            else if (data["TaskName"] != undefined)

                return data["TaskName"];

        }

        else {

            if (data["TName"] != undefined)

                data["TName"] = value;

            else if (data["RName"] != undefined)

                data["RName"] = value;

            else if (data["TaskName"] != undefined)

                data["TaskName"] = value;

        }

    };

    // 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;

    }

}

export default class FlexyGanttSkeleton extends React.Component {

    constructor() {

        super();

        initConverters();

        this.columns = [{

            field: "Name",

            title: "Name",

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

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

        }];

        // Determine the time the timeline in the gantt should scroll to.

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

        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>";

        // The template for the custom tooltip.

        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>";

    }

    // The FlexyGantt is bound to  resolve the hierarchy of Team/Resources/Tasks.

    resolverFunction(data) {

        if (data["Resources"] != undefined) {

            return data["Resources"];

        }

        return null;

    }

    GanttChartTemplateApplied(sender, args) {

        var $GanttChart = args.element;

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

    }

    render() {

        var height =

            {

                height: '495px'

            };

        return (

            <div style={height}>

                <FlexyGantt

                    Url='./DataSource/FlexyGanttSkeleton.json'

                    columns={this.columns} FlexyGanttSkeleton

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

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

                    TaskStartTimeProperty={this.TaskStartTimeProperty}

                    ParentTaskStartTimeProperty={this.ParentTaskStartTimeProperty}

                    TaskEndTimeProperty={this.TaskEndTimeProperty}

                    ParentTaskEndTimeProperty={this.ParentTaskEndTimeProperty}

                    TasksListProperty={this.TasksListProperty}

                    ParentTaskItemTemplate={this.pTemplate}

                    TaskItemTemplate={this.tTemplate}

                    TaskTooltipTemplate={this.TaskTooltipTemplate}

                />

            </div>

        );

    }

}

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