<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:acc="flash.accessibility.*"
        width="100%" height="100%"
        horizontalAlign="center"
        creationComplete="init()"
        show="loadSelectionLists()"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        currentState="{selectedListItem != null ? 'editing' : ''}">
        
    <mx:Script>
	<![CDATA[
		import gov.va.med.edp.util.AccessibilityTools;
		import mx.events.ListEvent;
        import mx.managers.DragManager;
        import mx.events.DragEvent;
        import mx.binding.utils.BindingUtils;
        import mx.collections.ArrayCollection;
        import gov.va.med.edp.widget.InfoDialog;
        import flash.events.Event;
        import mx.events.DataGridEvent;
        import gov.va.med.edp.vo.CodeSelectionVO;
        import gov.va.med.edp.control.config.ConfigurationEvent;
        import gov.va.med.edp.model.TrackingModelLocator;

        [Embed(source="icon_close16.png")]
        public var inactiveImg:Class;
        public var activeImg:Class = Bitmap;

        [Bindable]
        private var model: TrackingModelLocator = TrackingModelLocator.getInstance();

        private var _selectedListItem:CodeSelectionVO;
        private var reordering:Boolean = false;

        [Bindable(event="selectedListItemChange")]
        private function get selectedListItem():CodeSelectionVO {
            return _selectedListItem;
        }

        private function set selectedListItem(item:CodeSelectionVO):void {
            if (item == null) {
                if (reordering) {
                    callLater(reselect);
                    return;
                }
            } else if (item === _selectedListItem) {
                if (reordering) reordering = false;
            }
            _selectedListItem = item;
            dispatchEvent(new Event("selectedListItemChange"));
        }

        private function reselect():void {
            var index:int = selections.dataProvider.getItemIndex(_selectedListItem);
            selections.scrollToIndex(index);
            selections.selectedIndex = index;
            setModifiedFlags();
        }

        private var newCount: int = 0;

        [Bindable]
        private var selectionLists:ArrayCollection = new ArrayCollection();

        private function inactiveImgFunction(o:Object, c:DataGridColumn):String {
            var code:CodeSelectionVO = o as CodeSelectionVO;
            if (code.inactive)
                return "inactiveImg";
            else
                return "activeImg";
        }

        private function loadSelectionLists(): void
        {
            if (model.config.selectionConfigLoaded) return;
            var loadEvent: ConfigurationEvent =
                    new ConfigurationEvent(ConfigurationEvent.EVENT_LOAD_SELECTION_CONFIG);
            loadEvent.dispatch();
        }

        private function init():void
        {
            var statuses:SelectionListDescriptor = new SelectionListDescriptor();
            statuses.shortName = "Status";
            statuses.longName = "Selections for Status";
            statuses.flagsVisible = true;
            BindingUtils.bindProperty(statuses, "list", model.config, "statuses");

            var dispositions:SelectionListDescriptor = new SelectionListDescriptor();
            dispositions.shortName = "Disposition";
            dispositions.longName = "Selections for Disposition";
            dispositions.flagsVisible = true;
            BindingUtils.bindProperty(dispositions, "list", model.config, "dispositions");

            var delays:SelectionListDescriptor = new SelectionListDescriptor();
            delays.shortName = "Delay Reason";
            delays.longName = "Selections for Delay Reason";
            delays.flagsVisible = false;
            BindingUtils.bindProperty(delays, "list", model.config, "delays");

            var arrivals:SelectionListDescriptor = new SelectionListDescriptor();
            arrivals.shortName = "Source";
            arrivals.longName = "Selections for Mode of Arrival";
            arrivals.flagsVisible = false;
            BindingUtils.bindProperty(arrivals, "list", model.config, "arrivals");

            selectionLists.addItem(statuses);
            selectionLists.addItem(dispositions);
            selectionLists.addItem(delays);
            selectionLists.addItem(arrivals);
        }

        private function showFlagTip(item: Object): String
        {
            if (availLists.selectedIndex < 0) return "";

            switch (availLists.selectedIndex) {
                case 0:
                    return "A = Admission\nO = Observation";
                case 1:
                    return "VA = VA Admission\n   A = Admission\n   M = Missed Opportunity";
            }
            return ""
        }

        private function markChanged(event:Event): void
        {
            //TODO:  prevent default if exported selection?
            if (availLists.selectedIndex < 0) return;

            if (event.currentTarget === nameInput) {
                selectedListItem.displayName = nameInput.text;
            } else if (event.currentTarget === abbreviationInput) {
                selectedListItem.abbreviation = abbreviationInput.text;
            } else if (event.currentTarget === flagInput) {
                selectedListItem.flag = flagInput.text;
            } else if (event.currentTarget === inactiveCheckBox) {
                selectedListItem.inactive = inactiveCheckBox.selected;
            }
            
            setModifiedFlags();
        }

		private function setModifiedFlags(): void
		{
            new ConfigurationEvent(ConfigurationEvent.EVENT_SELECTION_MODIFIED).dispatch();
            //TODO:  post event to model instead of modifying directly
            switch (availLists.selectedIndex) {
                case 0:
                    model.config.statusesChanged = true;
                    break;
                case 1:
                    model.config.dispositionsChanged = true;
                    break;
                case 2:
                    model.config.delaysChanged = true;
                    break;
                case 3:
                    model.config.arrivalsChanged = true;
                    break;
            }
		}
		
        private function listOrderTextChanged(event:Event):void {
            if (listOrderInput.text.length == 0) return;
            var newIndex:int = int(listOrderInput.text) - 1;
            if (newIndex < 0 || newIndex >= selections.dataProvider.length) return;
            if (newIndex != selections.selectedIndex) {
                reordering = true;
                var list: ArrayCollection = selections.dataProvider as ArrayCollection;
                var sel: Object = list.removeItemAt(selections.selectedIndex);
                list.addItemAt(sel, newIndex);
                selections.selectedIndex = -1;
            }
        }

        private function addEntry(): void
        {
            if (availLists.selectedIndex < 0) return;

            //TODO:  post event to model instead of just updating dataprovider
            newCount++;
            var list: ArrayCollection = selections.dataProvider as ArrayCollection;
            var newEntry: CodeSelectionVO = new CodeSelectionVO();
            newEntry.displayName = "new" + newCount;
            newEntry.id = 0;
            list.addItem(newEntry);
            setModifiedFlags();
            if (AccessibilityTools.isAccessibilityActive()) InfoDialog.show("New Item Added", "Message", true);

            var newIndex: int = list.length - 1;
            selections.scrollToIndex(newIndex);
            selections.selectedIndex = newIndex;

        }

        private function saveChanges(): void
        {
			for each (var selectionList:SelectionListDescriptor in selectionLists) {
				 for each (var code:CodeSelectionVO in selectionList.list) {
					 if (code.displayName == null || code.displayName.length == 0) {
						 InfoDialog.show("There are selection list items with blank names which must be corrected before saving.\n"
						, "Required Names", false, btnSaveSelectionChanges);
						 return;
					 }
				 }
			}

            var e:ConfigurationEvent =
                    new ConfigurationEvent(ConfigurationEvent.EVENT_SAVE_SELECTION_CONFIG);
            e.dispatch();
        }


        private function handleEscKey(event:KeyboardEvent): void {
            if (event.keyCode == Keyboard.ESCAPE) {
                selections.selectedIndex = -1;
                availLists.selectedIndex = -1;
                if (btnSaveSelectionChanges.enabled)
                    btnSaveSelectionChanges.setFocus();
                else
                    availLists.setFocus();
            }
        }

        private function done():void {
            selections.selectedIndex = -1;
            if (btnSaveSelectionChanges.enabled)
                btnSaveSelectionChanges.setFocus();
            else
                selections.setFocus();
        }

        private function doDragDrop(event:DragEvent):void {
            reordering = true;
        }

	]]>
    </mx:Script>

    <mx:HBox height="100%" width="100%" keyDown="handleEscKey(event)" horizontalScrollPolicy="off">
        <mx:VBox>
            <mx:Label
            	text="Selection List"
            	minHeight="{listControlBox.height}"
            	styleName="controlLabel" />
            <mx:List
                    id="availLists"
                    accessibilityProperties="{availListsAcc}"
                    dataProvider="{selectionLists}"
                    labelField="shortName"
                    rowCount="{selectionLists.length}"
                    width="84"
                    backgroundColor="0xe7e7e7" cornerRadius="4"
                    tabIndex="1100"/>
        </mx:VBox>
        <mx:VBox
                id="listArea"
                height="100%"
                visible="{availLists.selectedIndex > -1}">
            <mx:HBox id="listControlBox" width="100%" verticalAlign="middle">
                <mx:Button label="Add" click="addEntry()" tabIndex="1101"/>
                <mx:Spacer width="2" />
                <mx:Label id="viewTitle" styleName="controlLabel"
                          text="{availLists.selectedItem.longName}"/>
            </mx:HBox>
            <mx:DataGrid
                    id="selections"
                    accessibilityProperties="{selectionsAcc}"
                    width="100%" height="100%"
                    dataProvider="{availLists.selectedItem.list}"
                    editable="false"
                    dragEnabled="true"
                    dropEnabled="true"
                    dragMoveEnabled="true"
                    dragDrop="doDragDrop(event)"
                    tabIndex="1102">
                <mx:columns>
                    <mx:DataGridColumn
                    	headerText="Name"
                    	dataField="displayName"
                    	width="184" />
                    <mx:DataGridColumn
                    	headerText="Abbr"
                    	dataField="abbreviation"
                    	width="42" />
                    <mx:DataGridColumn
                        headerText="Flags"
                        dataField="flag"
                        visible="{availLists.selectedItem.flagsVisible}"
                        dataTipFunction="showFlagTip"
                        showDataTips="true"
                        width="42" />
                    <mx:DataGridColumn
                        headerText="Inactive" textAlign="center"
                        labelFunction="inactiveImgFunction"
                        itemRenderer="gov.va.med.edp.widget.CenteredEmbedImage"
                        width="60" />
                    <mx:DataGridColumn
                    	headerText="National Name"
                    	dataField="national"
                    	width="184" />
                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
    </mx:HBox>

    <mx:HBox width="100%" horizontalAlign="center">
        <mx:Button
                id="btnSaveSelectionChanges"
                label="Save Selection List Changes"
                enabled="{(model.config.selectionMods &amp;&amp; model.config.selectionConfigLoaded)}"
                click="saveChanges()" tabIndex="1900"/>
    </mx:HBox>

    <acc:AccessibilityProperties id="availListsAcc" name="Selection List"/>
    <acc:AccessibilityProperties id="upButtonAcc" name="Up"/>
    <acc:AccessibilityProperties id="downButtonAcc" name="Down"/>
    <acc:AccessibilityProperties id="selectionsAcc" name="{viewTitle.text}"/>

    <mx:states>
        <mx:State name="editing">
            <mx:AddChild position="after" relativeTo="{listArea}">
                <mx:Form paddingLeft="0">
                    <mx:FormHeading label="Edit Selection Item"/>
                    <mx:FormItem label="Name">
                        <mx:TextInput id="nameInput" minWidth="184" text="{selectedListItem.displayName}"
                                      styleName="formField"
                                      change="markChanged(event)" tabIndex="1200"/>
                    </mx:FormItem>
                    <mx:FormItem label="Abbreviation">
                        <mx:TextInput id="abbreviationInput" minWidth="{nameInput.minWidth}" text="{selectedListItem.abbreviation}"
                                      styleName="formField" change="markChanged(event)" tabIndex="1201"/>
                    </mx:FormItem>
                    <mx:FormItem label="Flags" visible="{availLists.selectedItem.flagsVisible}"
                                 toolTip="{showFlagTip(null)}">
                        <mx:TextInput id="flagInput"  minWidth="{nameInput.minWidth}" text="{selectedListItem.flag}" styleName="formField"
                                      change="markChanged(event)" tabIndex="1202"/>
                    </mx:FormItem>
                    <mx:FormItem label="Inactive">
                        <mx:CheckBox id="inactiveCheckBox" selected="{selectedListItem.inactive}"
                                     styleName="formField" change="markChanged(event)" tabIndex="1203"/>
                    </mx:FormItem>
                    <mx:FormItem label="List Order" visible="{AccessibilityTools.isAccessibilityActive()}">
                        <mx:TextInput
                        	id="listOrderInput"
                        	minWidth="{nameInput.minWidth}"
                        	text="{availLists.selectedItem.list.getItemIndex(selectedListItem) + 1}"
                            styleName="formField"
                            tabIndex="1205"
                            change="listOrderTextChanged(event)"/>
                    </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:NumberValidator id="listOrderValidator" minValue="1" maxValue="{availLists.selectedItem.list.length}"
                        source="{listOrderInput}" property="text"/>
	<mx:StringValidator id="nameValidator" required="true" source="{nameInput}" property="text"/>

    <mx:Binding source="selections.selectedItem as CodeSelectionVO" destination="selectedListItem"/>
</mx:VBox>