import * as React from 'react';
import * as go from 'gojs';


import WorkflowChart from '../../../../GoJs/components/WorkflowChart';
import { RouteComponentProps } from 'react-router';

import { Redirect } from "react-router-dom";

import { TextField } from "office-ui-fabric-react/lib/components/TextField";
// import { Label } from 'office-ui-fabric-react/lib/components/Label';
import { Dropdown } from 'office-ui-fabric-react/lib/components/Dropdown';
import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";

import { CommandsBar, ListView } from '../../../../Controls';
import { Command } from '../../../../Models';
import { WorkflowService } from '../../../../Services';
import { WorkflowVersion, WorkflowState, WorkflowAction, ActionHandler, WorkflowEventHandler, StateHandler } from '../../../../Models/WorkflowManager';
import { DefaultButton, FocusZone, List, FocusZoneDirection, PrimaryButton, Icon, getRTL, Persona, IPersonaSharedProps, Toggle, Label, IColumn, } from 'office-ui-fabric-react';
import { ContextMenuItem } from '../../../../GoJs/Models/ContextMenuItem';

const gojsKey = process.env.REACT_APP_GOJS_KEY;

if (gojsKey) {
    // tslint:disable-next-line:no-any
    (go as any).licenseKey = gojsKey;
}
const examplePersona: IPersonaSharedProps = {
    secondaryText: 'Designer',
    tertiaryText: 'In a meeting',
    optionalText: 'Available at 4:00pm'
};
export class WorkflowDesigner extends React.Component<{} & RouteComponentProps<{ id: number, versionId: number }>, any>{
    private _contextMenuItems :ContextMenuItem[] = [{
        Text:"Add State",
        CallBackMethod:this.addState.bind(this)
    }];
    private _stateContextMenuItems :ContextMenuItem[] = [{
        Text:"Add Action",
        CallBackMethod:this.addAction.bind(this)
    }];
    private _chart: any;
    private _workflowService = new WorkflowService();
    private _workflowVersionId: number;
    private _workflowId: number;
    private _versionNumber: number;
    constructor(props: any) {
        super(props);
        this._workflowVersionId = this.props.match.params.versionId;
        this._workflowId = this.props.match.params.id;
        this._versionNumber = 0;
        this.state = {
            goBack: false,
            commands: this.getCommands(),
            showPanel: false,
            showActionHandlersPanel: false,
            showActionPermissionsPanel: false,
            shoReadersPanel: false,
            shoactionPropertiesPanel: false,
            showActionRulesPanel: false,
            shoSchedulePanel: false,
            handlers: Array<ActionHandler>(),
            selectedItem: {},
            states: [],
            handlerColumns: new Array<IColumn>()
        }

        this.loadColumns();
        this.loadVersion();
        this.loadHandlers();
    }
    private loadHandlers() {
        this._workflowService.getAllHandlers().then(result => {
            this.setState({ handlers: result })
        }, error => {
            console.log(error);
            alert(error);
        });
    }
    private getCommands(): Command[] {
        let commands = new Array<Command>();
        if (this._versionNumber == 0) {
            commands.push({
                key: "publish",
                name: "Publish",
                icon: "Publish",
                onClick: this.setAsFinal.bind(this)
            },
                {
                    key: "save",
                    name: "Save",
                    icon: "Save",
                    onClick: this.save.bind(this)
                });
        }

        commands.push(
            {
                key: "cancel",
                name: "Cancel",
                icon: "Cancel",
                onClick: this.cancel.bind(this)
            });

        // if (this._versionNumber == 0) {
        //     commands.push(
        //         {
        //             key: "AddAction",
        //             name: "Add Action",
        //             icon: "Add",
        //             onClick: this.addAction.bind(this)
        //         },
        //         {
        //             key: "AddState",
        //             name: "Add State",
        //             icon: "Add",
        //             onClick: this.addState.bind(this)
        //         });
        // }

        // commands.push(
        //     {
        //         key: "Properties",
        //         name: "Properties",
        //         icon: "Settings",
        //         onClick: this.viewProperties.bind(this)
        //     });
        return commands;
    }
    private loadVersion() {
        if (this._workflowVersionId > 0) {
            this._workflowService.getWorkflowVersion(this._workflowVersionId).then(
                (result: WorkflowVersion) => {
                    this._versionNumber = result.VersionNumber;
                    this._chart.setVersion(result);
                    this.setState({ commands: this.getCommands() });
                },
                (error: any) => { alert(error); }
            );
        }
    }
    private setAsFinal() {
        if (this._workflowVersionId != 0) {
            this._workflowService.setWorkflowVersionAsFinalVersion(this._workflowVersionId).then(
                (result: WorkflowVersion) => {
                    this._chart.setVersion(result);
                    this.setState({ goBack: true })
                },
                (error: any) => { alert(error); }
            );
        }
    }
    private save() {
        let version = this._chart.getVersion(this._workflowId, this._workflowVersionId);
        if (version != null) {
            this._workflowService.saveEntityWorkflowVersion(version).then(
                (result: WorkflowVersion) => {
                    this._workflowVersionId = result.Id;
                    this._chart.setVersion(result);
                    this.setState({ commands: this.getCommands() });
                },
                (error: any) => { alert(error); }
            );
        }
    }

    private cancel() {
        this.setState({ goBack: true });
    }

    private addAction() {
        let selectedNode = this._chart.getSelectedNode();
        if (selectedNode && selectedNode.key != "-1" && this.isState(selectedNode.tag)) {
            let workflowAction = new WorkflowAction();
            workflowAction.States = new Array<WorkflowState>();
            workflowAction.Handlers = new Array<ActionHandler>();
            workflowAction.WorkflowVersionId = this._workflowVersionId;

            if (this.isState(selectedNode.tag)) {
                selectedNode.tag.Actions.push(workflowAction);
                this._chart.updateSelectedNode(selectedNode);
            }

            this._chart.addAction(workflowAction);
        }
    }

    public addState() {
        //let selectedNode = this._chart.getSelectedNode();
        //if(selectedNode && !this.isState(selectedNode.tag)){
        let workflowState = new WorkflowState();
        workflowState.Actions = new Array<WorkflowAction>();
        workflowState.Handlers = new Array<StateHandler>();

        workflowState.WorkflowVersionId = this._workflowVersionId;

        // if(this.isAction(selectedNode.tag)){
        //     selectedNode.tag.States.push(workflowState);
        //     this._chart.updateSelectedNode(selectedNode);
        // }

        this._chart.addState(workflowState);
        //}
    }

    // private viewProperties() {
    //     let selectedNode = this._chart.getSelectedNode();
    //     if (selectedNode && selectedNode.tag) {
    //         this.setState({ selectedItem: selectedNode.tag, showPanel: true });
    //     }
    // }

    private closePanel() {
        return (): void => {
            this.setState({ showPanel: false });
        }
    }

    private loadColumns() {
        this.state.handlerColumns.push({
            dataType: 'string',
            name: 'Name',
            fieldName: 'DisplayName'
        })
    }

    private addActionHandler() {
        if (this.selectedActionHandler && this.state.selectedItem.Handlers.filter((h: ActionHandler) => { return h.WorkflowEventHandlerId == this.selectedActionHandler.WorkflowEventHandlerId }).length == 0) {
            this.state.selectedItem.Handlers.push(this.selectedActionHandler);
            this.setState({ selectedItem: this.state.selectedItem });
        }
    }
    private selectedActionHandler: ActionHandler;
    _handleActionHandlerChange(value: any) {
        this.selectedActionHandler = new ActionHandler();
        this.selectedActionHandler.WorkflowEventHandlerId = value.key;
        this.selectedActionHandler.WorkflowEventHandler = value.tag;
        this.selectedActionHandler.WorkflowActionId = this.state.selectedItem.Id;
    };

    private addBeforeStateChangedHandler() {
        if (this.selectedBeforeStateChangedHandler && this.state.selectedItem.Handlers.filter((h: StateHandler) => { return h.WorkflowEventHandlerId == this.selectedBeforeStateChangedHandler.WorkflowEventHandlerId }).length == 0) {
            this.state.selectedItem.Handlers.push(this.selectedBeforeStateChangedHandler);
            this.setState({ selectedItem: this.state.selectedItem });
        }
    }
    private selectedBeforeStateChangedHandler: StateHandler;
    _handleBeforeStateChangedHandlerChange(value: any) {
        this.selectedBeforeStateChangedHandler = new StateHandler();
        this.selectedBeforeStateChangedHandler.WorkflowEventHandlerId = value.key;
        this.selectedBeforeStateChangedHandler.WorkflowEventHandler = value.tag;
        this.selectedBeforeStateChangedHandler.WorkflowStateId = this.state.selectedItem.Id;
    };

    private addAfterStateChangedHandler() {
        if (this.selectedAfterStateChangedHandler && this.state.selectedItem.Handlers.filter((h: StateHandler) => { return h.WorkflowEventHandlerId == this.selectedAfterStateChangedHandler.WorkflowEventHandlerId }).length == 0) {
            this.state.selectedItem.Handlers.push(this.selectedAfterStateChangedHandler);
            this.setState({ selectedItem: this.state.selectedItem });
        }
    }
    private selectedAfterStateChangedHandler: StateHandler;
    _handleAfterStateChangedHandlerChange(value: any) {
        this.selectedAfterStateChangedHandler = new StateHandler();
        this.selectedAfterStateChangedHandler.WorkflowEventHandlerId = value.key;
        this.selectedAfterStateChangedHandler.WorkflowEventHandler = value.tag;
        this.selectedAfterStateChangedHandler.WorkflowStateId = this.state.selectedItem.Id;
    };

    _handleLabelChange(value: any) {
        let selectedNode = this._chart.getSelectedNode();
        selectedNode.text = value;
        selectedNode.tag.Name = value;
        this._chart.updateSelectedNode(selectedNode);
    };
    _handleRepetitionInHoursChange(value: any) {
        this.state.selectedItem.RepetitionInHours = value;
    };

    _handleCheckboxIsUserActionChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
        this.state.selectedItem.Type = isChecked ? 1 : 0;
        this.setState({ selectedItem: this.state.selectedItem });
    }

    _handleCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
        this.state.selectedItem.IsRepeated = isChecked;
    }


    private _showStateProperties() {
        return (
            <div>
                <div> <h5>Before state Changed</h5>
                    {this.state.selectedItem.Handlers ? <ListView
                        Items={this.state.selectedItem.Handlers.map((h: StateHandler) => h.WorkflowEventHandler)}
                        Columns={this.state.handlerColumns} /> : ""}
                </div>
                <div>
                    <Dropdown className="ms-Grid-col ms-lg12"
                        options={this.state.handlers.map((handler: WorkflowEventHandler) => {
                            return { key: handler.Id, text: handler.DisplayName, tag: handler }
                        })}
                        label={"Handlers"}
                        onChanged={this._handleBeforeStateChangedHandlerChange.bind(this)} />
                    <DefaultButton onClick={this.addBeforeStateChangedHandler.bind(this)}>Add</DefaultButton>
                </div>
                <div> <h5>After state Changed</h5>
                    {this.state.selectedItem.Handlers ? <ListView
                        Items={this.state.selectedItem.Handlers.map((h: StateHandler) => h.WorkflowEventHandler)}
                        Columns={this.state.handlerColumns} /> : ""}
                </div>
                <div>
                    <Dropdown className="ms-Grid-col ms-lg12"
                        options={this.state.handlers.map((handler: WorkflowEventHandler) => {
                            return { key: handler.Id, text: handler.DisplayName, tag: handler }
                        })}
                        label={"Handlers"}
                        onChanged={this._handleAfterStateChangedHandlerChange.bind(this)} />
                    <DefaultButton onClick={this.addAfterStateChangedHandler.bind(this)}>Add</DefaultButton>
                </div>
            </div>
        );
    }
    private _showActionProperties() {
        return (
            <div>
                <div style={{ marginTop: 10 }}>
                    <Checkbox defaultChecked={this.state.selectedItem.Type == 1} label="Is User Action" onChange={this._handleCheckboxIsUserActionChange.bind(this)} />
                    {this.state.selectedItem.Type == 1 ?
                        <div>
                            <TextField
                                value={this.state.selectedItem.RepetitionInHours}
                                onChanged={this._handleRepetitionInHoursChange.bind(this)} label="Start After" />
                            <div style={{ marginTop: 10 }}>
                                <Checkbox defaultChecked={this.state.selectedItem.IsRepeated} label="Is Repeated" onChange={this._handleCheckboxChange.bind(this)} />
                            </div>
                        </div>
                        : ""}
                </div>
                {this.state.selectedItem.Handlers ? <ListView
                    Items={this.state.selectedItem.Handlers.map((h: ActionHandler) => h.WorkflowEventHandler)}
                    Columns={this.state.handlerColumns} /> : ""}

                <Dropdown className="ms-Grid-col ms-lg12"
                    options={this.state.handlers.map((handler: WorkflowEventHandler) => {
                        return { key: handler.Id, text: handler.DisplayName, tag: handler }
                    })}
                    label={"Handlers"}
                    onChanged={this._handleActionHandlerChange.bind(this)} />
                <DefaultButton onClick={this.addActionHandler.bind(this)}>Add</DefaultButton>
            </div>
        );
    }
    private isAction(item: any): boolean {
        if (item && item.States)
            return true;
        return false
    }
    private isState(item: any): boolean {
        if (item && item.Actions)
            return true;
        return false
    }
    private _showProperty = (): JSX.Element => {
        return (
            <div style={{ padding: 30 }}>
                <TextField
                    value={this.state.selectedItem.Name}
                    onChanged={this._handleLabelChange.bind(this)} label="Label" />
                {this.isAction(this.state.selectedItem) ? this._showActionProperties() : ""}
                {this.isState(this.state.selectedItem) ? this._showStateProperties() : ""}
            </div>
        )
    }
    private _onRenderCell(item: any, index: number | undefined): JSX.Element {
        return (
            <div className="ms-ListBasicExample-itemCell" data-is-focusable={true}>

                <div className="ms-ListBasicExample-itemContent">
                    <div className="ms-ListBasicExample-itemName">{item.name}</div>
                </div>
                <Icon className="ms-ListBasicExample-chevron" iconName={getRTL() ? 'ChevronLeft' : 'ChevronRight'} />
            </div>
        );
    }
    private _shoButton = (): JSX.Element => {
        return (
            <div className="ms-modalExample-footer modalFooter" >
                <PrimaryButton style={{ marginRight: '8px' }} >
                    Add
            </PrimaryButton>
                <DefaultButton onClick={this.closeActionHandlersPanel()}>Cancel</DefaultButton>
            </div>
        )
    }
    private ActionRulesButton = (): JSX.Element => {
        return (
            <div className="ms-modalExample-footer modalFooter" >
                <PrimaryButton style={{ marginRight: '8px' }} >
                    Add
            </PrimaryButton>
                <DefaultButton onClick={this.closeActionRulesPanel()}>Cancel</DefaultButton>
            </div>
        )
    }
    _ActionHandlers = (showActionHandlersPanel: boolean) => {
        this.setState({ showActionHandlersPanel });
    }
    _ActionPermissions = (showActionPermissionsPanel: boolean) => {
        this.setState({ showActionPermissionsPanel });
    }
    _ActionProperties = (shoactionPropertiesPanel: boolean) => {
        this.setState({ shoactionPropertiesPanel });
    }
    _ActionRules = (showActionRulesPanel: boolean) => {
        this.setState({ showActionRulesPanel });
    }

    addReadersPanel(shoReadersPanel: boolean) {

        this.setState({ shoReadersPanel });

    }
    private ActionPermissionsPanelFooter = (): JSX.Element => {
        return (
            <div className="ms-modalExample-footer modalFooter" >
                <PrimaryButton style={{ marginRight: '8px' }} onClick={this.addReadersPanel.bind(this, true)} >
                    Add
            </PrimaryButton>
                <DefaultButton onClick={this.closeActionPermissionsPanel()}>Cancel</DefaultButton>
            </div>
        )
    }
    private ReadersPanel = (): JSX.Element => {
        return (
            <div className="ms-modalExample-footer modalFooter" >
                <PrimaryButton style={{ marginRight: '8px' }} onClick={this.addReadersPanel.bind(this, true)} >
                    Add
            </PrimaryButton>
                <DefaultButton onClick={this.closeReadersPanel()}>Cancel</DefaultButton>
            </div>
        )
    }
    private SchedulePanel = (): JSX.Element => {
        return (
            <div className="ms-modalExample-footer modalFooter" >
                <PrimaryButton style={{ marginRight: '8px' }} onClick={this.addReadersPanel.bind(this, true)} >
                    Add
            </PrimaryButton>
                <DefaultButton onClick={this.closeSchedulePanel()}>Cancel</DefaultButton>
            </div>
        )
    }
    private closeActionHandlersPanel() {
        return (): void => {
            this.setState({ showActionHandlersPanel: false });
        }
    }
    private closeActionRulesPanel() {
        return (): void => {
            this.setState({ showActionRulesPanel: false });
        }
    }
    private closeReadersPanel() {
        return (): void => {
            this.setState({ shoReadersPanel: false });
        }
    }
    private closeSchedulePanel() {
        return (): void => {
            this.setState({ shoSchedulePanel: false });
        }
    }
    private closeactionPropertiesPanel() {
        return (): void => {
            this.setState({ shoactionPropertiesPanel: false });
        }
    }

    private closeActionPermissionsPanel() {
        return (): void => {
            this.setState({ showActionPermissionsPanel: false });
        }
    }
    onChange(shoSchedulePanel: boolean, checked: boolean) {
        if (checked == true) {
            this.setState({ shoSchedulePanel });

        }
    }

    _handleEnglishNameChange(value: any) {
        this.state.selectedItem.englishName = value;
    };
    _handleArabicNameChange(value: any) {
        this.state.selectedItem.arabicName = value;
    };
    _handleEnglishFriendlyNameChange(value: any) {
        this.state.selectedItem.englishFriendlyName = value;
    };
    _handleArabicFriendlyNameChange(value: any) {
        this.state.selectedItem.arabicFriendlyName = value;
    };
    render() {
        return (
            this.state.goBack ? <Redirect to={"/workflow"}></Redirect> :
                <div style={{ height: '600px' }}>
                    <CommandsBar Commands={this.state.commands} />
                    <div style={{ height: '100%', display: 'flex', flexFlow: 'column' }}>
                        <WorkflowChart
                            onRef={(ref: any) => (this._chart = ref)}
                            ActionHandlerss={this._ActionHandlers}
                            ActionPermissions={this._ActionPermissions}
                            ActionProperties={this._ActionProperties}
                            ActionRules={this._ActionRules}
                            ContextMenuItems={this._contextMenuItems}
                            StateContextMenuItems={this._stateContextMenuItems}
                             />
                    </div>
                    <Panel
                        className="panelStyle"
                        isOpen={this.state.showPanel}
                        onDismiss={this.closePanel()}
                        type={PanelType.smallFixedFar}
                        onRenderBody={this._showProperty.bind(this)}
                        headerText="Edit Properties"
                        isLightDismiss={true}
                    >
                    </Panel>
                    <Panel
                        className="panelStyle"
                        isOpen={this.state.showActionHandlersPanel}
                        onDismiss={this.closeActionHandlersPanel()}
                        type={PanelType.smallFixedFar}
                        headerText="Action handlers"
                        isLightDismiss={true}
                        onRenderFooter={this._shoButton}

                    >
                        <FocusZone direction={FocusZoneDirection.vertical}>
                            <List items={this.state.ActionHandler} onRenderCell={this._onRenderCell} />
                        </FocusZone>
                    </Panel>


                    <Panel
                        className="panelStyle"
                        isOpen={this.state.showActionRulesPanel}
                        onDismiss={this.closeActionRulesPanel()}
                        type={PanelType.smallFixedFar}
                        headerText="Action Rules"
                        isLightDismiss={true}
                        onRenderFooter={this.ActionRulesButton}

                    >
                        <FocusZone direction={FocusZoneDirection.vertical}>
                            <List onRenderCell={this._onRenderCell} />
                        </FocusZone>
                    </Panel>


                    <Panel
                        className="panelStyle"
                        isOpen={this.state.showActionPermissionsPanel}
                        onDismiss={this.closeActionPermissionsPanel()}
                        type={PanelType.smallFixedFar}
                        headerText="Action Permissions"
                        isLightDismiss={true}
                        onRenderFooter={this.ActionPermissionsPanelFooter}>
                        <div className="ms-PersonaExample">
                            <Persona {...examplePersona} text="Kat Larrson" />
                            <Persona {...examplePersona} text="Annie" />
                            <Persona {...examplePersona} text="Annie Lindqvist" />
                            <Persona {...examplePersona} text="Annie Boyl Lindqvist" />
                            <Persona {...examplePersona} text="Annie Boyl Carrie Lindqvist" />
                        </div>


                    </Panel>
                    <Panel
                        className="panelStyle"
                        isOpen={this.state.shoReadersPanel}
                        onDismiss={this.closeReadersPanel()}
                        type={PanelType.smallFixedFar}
                        headerText="add Readers"
                        isLightDismiss={true}
                        onRenderFooter={this.ReadersPanel}>
                        <div className="ms-PersonaExample">
                            <Persona {...examplePersona} text="Kat Larrson" />
                        </div>
                    </Panel>
                    <Panel
                        className="panelStyle"
                        isOpen={this.state.shoactionPropertiesPanel}
                        onDismiss={this.closeactionPropertiesPanel()}
                        type={PanelType.smallFixedFar}
                        headerText="Action Properties"
                        isLightDismiss={true}>
                        <div style={{ textAlign: 'center', border: '1px solid black' }}>
                            Action Name Translations
                            </div>
                        <TextField onChanged={this._handleEnglishNameChange.bind(this)} label="English" />
                        <TextField onChanged={this._handleArabicNameChange.bind(this)} label="Arabic" />
                        <div style={{ textAlign: 'right' }}>
                            <PrimaryButton style={{ marginTop: '8px', marginBottom: '8px' }} >
                                save
                                </PrimaryButton>
                        </div>
                        <div style={{ textAlign: 'center', border: '1px solid black' }}>
                            Action Friendly Name Translations
                            </div>
                        <TextField onChanged={this._handleEnglishFriendlyNameChange.bind(this)} label="English" />
                        <TextField onChanged={this._handleArabicFriendlyNameChange.bind(this)} label="Arabic" />
                        <div style={{ textAlign: 'right' }}>
                            <PrimaryButton style={{ marginTop: '8px', marginBottom: '8px' }} >
                                save
                                </PrimaryButton>
                        </div>
                        <div style={{ textAlign: 'center', border: '1px solid black' }}>
                            Advanced Properties
                            </div>
                        <Toggle
                            defaultChecked={false}
                            label="Action Schedule"
                            onText="On"
                            offText="Off"
                            onFocus={() => console.log('onFocus called')}
                            onChanged={this.onChange.bind(this, true, true)}
                        />
                    </Panel>
                    <Panel
                        className="panelStyle"
                        isOpen={this.state.shoSchedulePanel}
                        onDismiss={this.closeSchedulePanel()}
                        type={PanelType.smallFixedFar}
                        headerText="Edit Schedule"
                        isLightDismiss={true}
                        onRenderFooter={this.SchedulePanel}>
                        <div className="ms-Grid-row" style={{ marginBottom: 8 }}>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Start After:</Label>
                            </div>
                            <div className="ms-Grid-col ms-lg3">
                                <TextField />
                            </div>
                            <div className="ms-Grid-col ms-lg5">
                                <Dropdown
                                    defaultSelectedKey="D"
                                    options={[
                                        { key: 'A', text: 'Day' },
                                        { key: 'B', text: 'Months' },
                                        { key: 'C', text: 'Years' },
                                    ]}
                                />
                            </div>
                        </div>
                        <div className="ms-Grid-row" style={{ marginBottom: 8 }}>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Repeate:</Label>
                            </div>
                            <div className="ms-Grid-col ms-lg8">
                                <Dropdown
                                    defaultSelectedKey="D"
                                    options={[
                                        { key: 'AA', text: 'Daily' },
                                        { key: 'BB', text: 'Monthly' },
                                        { key: 'CC', text: 'Yearly' },
                                    ]}
                                />
                            </div>
                        </div>
                        <div className="ms-Grid-row" style={{ marginBottom: 8 }}>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Every:</Label>
                            </div>
                            <div className="ms-Grid-col ms-lg4">
                                <TextField />
                            </div>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Days</Label>
                            </div>
                        </div>
                        <div className="ms-Grid-row" style={{ marginBottom: 8 }}>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Every:</Label>
                            </div>
                            <div className="ms-Grid-col ms-lg4">
                                <TextField />
                            </div>
                            <div className="ms-Grid-col ms-lg4">
                                <Label>Days</Label>
                            </div>
                        </div>
                    </Panel>
                </div>
        );


    }

}

export default WorkflowDesigner;

