import * as React from "react";
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 { Image } from 'office-ui-fabric-react/lib/Image';
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
import { IconButton, Button } from "office-ui-fabric-react/lib/Button";
import 'office-ui-fabric-react/lib/components/Modal/examples/Modal.Basic.Example.scss';
import { Field, Entity, Lookup } from "../Models";
import {  EntityService, CachingService } from "../Services";
import {FieldTypes} from "../Enums"
import { DatePicker } from "office-ui-fabric-react/lib/components/DatePicker/DatePicker";
import { ChoiceGroup } from "office-ui-fabric-react/lib/components/ChoiceGroup/ChoiceGroup";
import './FormDesigner.css'
import { Link, Callout, createRef } from "office-ui-fabric-react";

export class FormDesigner extends React.Component<any, any> {
    private _menuButtonElement = createRef<HTMLElement>();
    private _entityService = new EntityService();
    private _cachingService = new CachingService();

    private entity: Entity;
    private relatedEntities:Entity[];
    [x: string]: any;

    constructor(props: any) {
        super(props);

        this.state = {
            showPanel: false,
            selectedItem: new Field(),
            isCalloutVisible: false,
            entities: null,
            isManyToManyRelation:false
        };

        this.entity = this._cachingService.read("tempEntity") as Entity;

        this.loadEntities();
        this.loadReleatedEntities();
    }

    private loadEntities() {        
        this._entityService.listEntities(this.entity.workspaceId).then(result => this.setState({ entities: result.filter(f => f.id != this.entity.id) }));
    }


    private loadReleatedEntities(){
        if (this.entity != null && this.entity.id > 0) {
            this._entityService.listRelatedEntities(this.entity.id).then(result => {
                this.relatedEntities = result;
            }, error => {
                alert(error.text());
            });
        }
    }

    public render() {
        return (
            <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg8">
                <div className="formPreview">
                    {
                        this.props.formElements.map((item: any) => {
                            this._swapElementUp = this._moveElementToNewIndex.bind(this, item.index, item.index - 1);
                            this._swapElementDown = this._moveElementToNewIndex.bind(this, item.index, item.index + 1);
                            this._showPanel = this._setShowPanel(true, item);
                            this._DeleteItem = this._deleteElement.bind(this, item.index);
                            switch (item.type) {

                                case FieldTypes.Text:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField className="ms-Grid-col ms-lg11" label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.Header:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <h3 className="ms-Grid-col ms-lg11">{item.displayName}</h3>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                case FieldTypes.Paragraph:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <p className="ms-Grid-col ms-lg11">{item.displayName}</p>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                    case FieldTypes.User:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Dropdown className="ms-Grid-col ms-lg11" options={[ {key:0,text:"user name"}]} label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>;
                                case FieldTypes.SingleChoice:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Dropdown className="ms-Grid-col ms-lg11" options={item.lookups?item.lookups.map((lookup:Lookup)=>{return {key:lookup.id,text:lookup.value}}):""} label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>;
                                case FieldTypes.MultipleChoice:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Checkbox className="ms-Grid-col ms-lg11" label={item.displayName} ariaDescribedBy={'descriptionID'} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                case FieldTypes.Multiline:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField className="ms-Grid-col ms-lg11" label={item.displayName} multiline rows={4} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                case FieldTypes.Image:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <div className="ms-Grid-col ms-lg11"> <Label>{item.displayName}</Label>
                                            <Image
                                                src='/images/default.jpg'
                                                alt={item.displayName}
                                                width={100}
                                            />
                                        </div>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>

                                case FieldTypes.Label:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Label className="ms-Grid-col ms-lg11">{item.displayName}</Label>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                case FieldTypes.Date:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <DatePicker
                                            className="ms-Grid-col ms-lg11"
                                            label={item.displayName}
                                            isRequired={false}
                                            placeholder="Select a date..."
                                            allowTextInput={true}
                                        />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>
                                case FieldTypes.Currency:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField iconProps={{ iconName: 'Money' }} className="ms-Grid-col ms-lg11" label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.Percentage:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField iconProps={{ iconName: 'Chart' }} className="ms-Grid-col ms-lg11" label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.Number:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField iconProps={{ iconName: 'NumberField' }} className="ms-Grid-col ms-lg11" label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.Boolean:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <div className="choiceGroup ms-Grid-col ms-lg11">
                                            <ChoiceGroup
                                                defaultSelectedKey="Yes"
                                                options={[
                                                    {
                                                        key: 'Yes',
                                                        text: 'Yes',
                                                        disabled: true

                                                    },
                                                    {
                                                        key: 'No',
                                                        text: 'No',
                                                        disabled: true

                                                    },

                                                ]}
                                                onChange={this._onChange}
                                                label={item.displayName}
                                            />
                                        </div>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />
                                    </div>;
                                case FieldTypes.Document:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Label>{item.displayName}</Label>
                                        <Link className="choiceGroup ms-Grid-col ms-lg11">Document</Link>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                    case FieldTypes.MultipleDocuments:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <Label>{item.displayName}</Label>
                                        <Link className="choiceGroup ms-Grid-col ms-lg11">Multiple Documents</Link>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.Callout:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg5" key={`form-field-${item.index}`}>
                                        <div className="choiceGroup ms-Grid-col ms-lg10">
                                            <div className="buttonArea" ref={this._menuButtonElement}>
                                                <IconButton
                                                    iconProps={{ iconName: 'Chat' }}
                                                    onClick={this._onShowMenuClicked}

                                                />
                                            </div>
                                            <Callout
                                                className="ms-CalloutExample-callout callout"
                                                ariaLabelledBy={'callout-label-1'}
                                                ariaDescribedBy={'callout-description-1'}
                                                role={'alertdialog'}
                                                gapSpace={0}
                                                target={this._menuButtonElement.value}
                                                onDismiss={this._onCalloutDismiss}
                                                setInitialFocus={true}
                                                hidden={!this.state.isCalloutVisible}
                                            >

                                                <div className="ms-CalloutExample-inner calloutContent">
                                                    <div className="ms-CalloutExample-content">
                                                        <p className="ms-CalloutExample-subText" id={'callout-description-1'}>
                                                            {item.displayName}
                                                        </p>
                                                    </div>

                                                </div>
                                            </Callout>
                                        </div>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                case FieldTypes.EntityReference:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <div className="choiceGroup ms-Grid-col ms-lg11">

                                            {/* <Dropdown
                                                className="ms-Grid-col ms-lg11" 
                                                label={item.displayName}
                                                options={[item.state.selectedItem.entities]} */}
                                            {item.displayName}                                            
                                        </div>
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;
                                    case FieldTypes.Html:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.index}`}>
                                        <TextField className="ms-Grid-col ms-lg11" label={item.displayName} />
                                        <IconButton
                                            iconProps={{ iconName: 'MoreVertical' }}
                                            menuProps={{
                                                items: [
                                                    {
                                                        key: 'Properties',
                                                        text: 'Properties',
                                                        iconProps: { iconName: 'Edit' },
                                                        onClick: this._showPanel

                                                    },
                                                    {
                                                        key: ' SwapUp',
                                                        text: ' Swap Up',
                                                        iconProps: { iconName: 'ChevronUp' },
                                                        onClick: this._swapElementUp

                                                    },
                                                    {
                                                        key: ' SwapDown',
                                                        text: ' Swap Down',
                                                        iconProps: { iconName: 'ChevronDown' },
                                                        onClick: this._swapElementDown

                                                    },
                                                    {
                                                        key: 'Remove',
                                                        text: 'Remove',
                                                        iconProps: { iconName: 'Remove' },
                                                        onClick: this._DeleteItem
                                                    }
                                                ]
                                            }}
                                        />

                                    </div>;

                            }
                            return <div></div>
                        })
                    }
                </div>
                <Panel
                    className="panelStyle"
                    isOpen={this.state.showPanel}
                    onDismiss={this._setShowPanel(false, undefined)}
                    type={PanelType.smallFixedFar}
                    onRenderBody={this._showProperty.bind(this)}
                    headerText="Edit Properties"
                    isLightDismiss = {true}
                >
                </Panel>                
            </div>
        )

    }


    private _onShowMenuClicked = (): void => {
        this.setState({
            isCalloutVisible: !this.state.isCalloutVisible
        });
    };

    private _onCalloutDismiss = (): void => {
        this.setState({
            isCalloutVisible: false
        });
    };

    
    _moveElementToNewIndex(itemIndex: any, newIndex: any) {
        this.props.moveElementToNewIndex(itemIndex, newIndex);
    };

    _deleteElement(itemID: any) {
        this.props.deleteElementcallback(itemID);
    };

    private _setShowPanel(showPanel: boolean, item: any) {
        return (): void => {
            this.setState({ showPanel });
            if (item) {
                this.setState({ selectedItem: item });
            }
        }
    };


        // _onSaveChanges(displayName: string, index: number) {
    //     this.setState({ showPanel: false });
    //     this.props.updateProperty(this.state.selectedItem.displayName, index);
    // };
    // private _onRenderFooterContent = (): JSX.Element => {
    //     return (
    //         <div>
    //             <PrimaryButton
    //                 onClick={(e) => this._onSaveChanges(this.state.selectedItem.displayName,
    //                     this.state.selectedItem.index)
    //                 }
    //                 style={{ marginRight: '8px' }}>
    //                 Save
    //             </PrimaryButton>
    //             <DefaultButton onClick={this._setShowPanel(false, undefined)}>
    //                 Cancel
    //             </DefaultButton>
    //         </div>
    //     );
    // };
    _handleChoiceChange(value: any) {
        //debugger;
        this.state.selectedItem.referencedEntityId = value.key;
        this.setState({isManyToManyRelation:this.isManyToMany(value.key)});
    };
    private isManyToMany(referencedEntityId: number) {
        if (this.relatedEntities && this.relatedEntities.length > 0) {
            for (let i = 0; i <= this.relatedEntities.length; i++) {
                if (this.relatedEntities[i].id == referencedEntityId) {
                    return true;
                }
            }
        }
        return false;
    }
    private onEnableSelectionForReferencedEntityChanged(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
        this.state.selectedItem.enableSelectionForReferencedEntity = isChecked;
        this.setState({selectedItem:this.state.selectedItem});
        //alert(`The View in List has been changed to ${isChecked}.`);
    }
    private onEnableCreationForReferencedEntityChanged(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
        this.state.selectedItem.enableCreationForReferencedEntity = isChecked;
        this.setState({selectedItem:this.state.selectedItem});
        //alert(`The View in List has been changed to ${isChecked}.`);
    }
    private getEntityReferenceProperties(){
        if(!this.state.entities)
            this.loadEntities();

            return <div>
            <h5>Manage Referenced Entity</h5>
                <Dropdown
                className="ms-Grid-col ms-lg11" 
                defaultSelectedKey={this.state.selectedItem.referencedEntityId}
                options={this.state.entities && this.state.entities.length>0?this.state.entities.map((entity: any) => { return { key: entity.id, text: entity.displayName } }):""}
                onChanged={this._handleChoiceChange.bind(this)}
            />
            {this.state.isManyToManyRelation?<div>
                <h5>This entity has a many to many relationship with the selected entity</h5>
                <Checkbox className="checkboxStyles" label="Enable Selection" checked={this.state.selectedItem.enableSelectionForReferencedEntity} onChange={this.onEnableSelectionForReferencedEntityChanged.bind(this)} ariaDescribedBy={'descriptionID'} />
                <Checkbox className="checkboxStyles" label="Enable Creation" checked={this.state.selectedItem.enableCreationForReferencedEntity} onChange={this.onEnableCreationForReferencedEntityChanged.bind(this)} ariaDescribedBy={'descriptionID'} />
            </div>:""}

            
            
        </div>;
    }
    private _handleNewLookupValueChange(value: any) {
        this.setState({newLookupValue : value});
    }
    private addLookup() {
        let value = this.state.newLookupValue.trim();
        if(value != ""){
            let foundLookups = this.state.selectedItem.lookups.filter(function(l:Lookup){ return l.value === value });
            if(foundLookups.length==0)
            {
                let lookup = new Lookup();
                lookup.value = value;

                this.state.selectedItem.lookups.push(lookup);
                this.setState({selectedItem:this.state.selectedItem,newLookupValue:""});
            }
        }
    }

    private getChoiceProperties(){
        if(!this.state.selectedItem.lookups)
            this.state.selectedItem.lookups = new Array<Lookup>();

        return <div>
            <h5>Manage Lookup</h5>
            <TextField value={this.state.newLookupValue} 
            onChanged={this._handleNewLookupValueChange.bind(this)}  />
            <Button onClick={()=>{this.addLookup()}}>Add</Button>
            {
                this.state.selectedItem.lookups.map((lookup:Lookup)=>{
                    return <div key={lookup.value}>{lookup.value}</div>
                })
            }
        </div>
    }
    private _onUniquChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
        this.state.selectedItem.isUnique = isChecked;
        this.setState({selectedItem:this.state.selectedItem});
        //alert(`The Unique has been changed to ${isChecked}.`);
    }
    private _onViewInListChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
        this.state.selectedItem.showInListView = isChecked;
        this.setState({selectedItem:this.state.selectedItem});
        //alert(`The View in List has been changed to ${isChecked}.`);
    }
    private _onStepNumberChange(value: any) {
        this.state.selectedItem.stepNumber = value;
        this.setState({selectedItem:this.state.selectedItem});
    }
    private _onRequiredChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
        this.state.selectedItem.allowNull = !isChecked;
        this.setState({selectedItem:this.state.selectedItem});
        //alert(`The Required has been changed to ${isChecked}.`);
    }

    private getExtraProperties(type:number){
        if(type == FieldTypes.Callout || type == FieldTypes.Paragraph || type == FieldTypes.Label || type == FieldTypes.Header)
            return "";
        
        return <div>
            <Checkbox disabled={this.state.selectedItem.isSystemDefined} className="checkboxStyles" label="Unique" checked={this.state.selectedItem.isUnique} onChange={this._onUniquChange.bind(this)} ariaDescribedBy={'descriptionID'} />
            <Checkbox disabled={this.state.selectedItem.isSystemDefined} className="checkboxStyles" label="View in List" checked={this.state.selectedItem.showInListView} onChange={this._onViewInListChange.bind(this)} ariaDescribedBy={'descriptionID'} />
            <Checkbox disabled={this.state.selectedItem.isSystemDefined} className="checkboxStyles" label="Required" checked={!this.state.selectedItem.allowNull} onChange={this._onRequiredChange.bind(this)} ariaDescribedBy={'descriptionID'} />
            <TextField value={this.state.selectedItem.stepNumber} label="StepNumber" onChanged={this._onStepNumberChange.bind(this)}  />
            {type==FieldTypes.SingleChoice || type==FieldTypes.MultipleChoice?this.getChoiceProperties():""} 
            {type==FieldTypes.EntityReference ? this.getEntityReferenceProperties():""} 
        </div>;
    }
    _handleLabelChange(value: any) {
        if(!this.state.selectedItem.id){
            this.state.selectedItem.name = value;
        }
        this.state.selectedItem.displayName = value;
        this.setState({selectedItem:this.state.selectedItem});
    };
    private _showProperty = (): JSX.Element => {
        return (
            <div style={{ padding: 30 }}>
                <TextField disabled={this.state.selectedItem.isSystemDefined} value={this.state.selectedItem.displayName} onChanged={this._handleLabelChange.bind(this)} label="Label" />
                {this.getExtraProperties(this.state.selectedItem.type)}
            </div>
        )
    }
}
