this.$.categoryImageErrorText.style.display = "none";
<link rel="import" href="/elements/all-elements.html">
<link rel="import" src="/styles/all-styles.html">

<dom-module id="category-dialog" modal>
    <template>
        <style include="all-styles">
            :host {
                display: block;
                padding: 15px;
                width: 60%;
                height: 70vh;
                background: #fff;
            }

            paper-dialog-scrollable.category-max {
                --paper-dialog-scrollable: {
                    height: 49vh;
                    bottom: 10px;
                }
            }

            .buttonsBottom {
                position: absolute;
                bottom: 10px;
                right: 0;
                margin: 1%;
            }

            paper-button.button {
                background: #009688;
                color: #ffffff
            }

            iron-icon.cancelIcon {
                float: right;
                top: 0;
                fill: #009688;
            }

            paper-dialog-scrollable.add-category-max {
                --paper-dialog-scrollable: {
                    padding: 15px;
                    height: 40vh;
                }
            }

            paper-swatch-picker.colorPicker {
                --paper-swatch-picker-color-size: 10px;
                --paper-swatch-picker-icon-size: 40px;
            }

            paper-button {
                text-transform: none;
            }

            iron-icon.rightJustifiedIcon {
                fill: #1c5681;
                float: right;
                margin-right: 10px;
            }

            .smallCardContainer {
                padding: 5px;
                margin: 10px;
            }
        </style>
        <iron-ajax id="addCategoryAjax" url="" method="PUT" contentType="application/json" handle-as="json"
            on-response="handleAddCategoryApiResponse" on-error="errorApiResponse" debounce-duration="300"></iron-ajax>
        <iron-ajax id="editCategoryAjax" url="" method="POST" contentType="application/json" handle-as="json"
            on-response="handleApiResponse" on-error="errorApiResponse" debounce-duration="300"></iron-ajax>
        <iron-ajax id="deleteCategoryAjax" url="" method="DELETE" contentType="application/json" handle-as="json"
            on-response="handleDeleteCategoryApiResponse" on-error="errorDeleteApiResponse" debounce-duration="300">
        </iron-ajax>
        <iron-ajax id="updateLifeTimeCountersAjax" url="" method="PUT" contentType="application/json" handle-as="json"
            on-response="handleUpdateLifeTimeCountersResponse" on-error="errorUpdateLifeTimeCountersResponse"
            debounce-duration="300"></iron-ajax>
        <iron-ajax id="getCategoriesAjax" url="" method="GET" contentType="application/json" handle-as="json"
            on-response="handleGetCategoriesResponse" on-error="errorGetCategoriesResponse"
            last-response="{{getCategoriesResponse}}" debounce-duration="300">
        </iron-ajax>

        <!-- Dialog for adding a category -->
        <div id="addCategoryDetails">
            <iron-icon icon="icons:close" class="cancelIcon" on-click="onCancelButtonClicked"></iron-icon>
            <h1 id="title">Add New Category</h1>
            <p id="addCategoryErrorText" style="color:red"></p><br />
            <paper-dialog-scrollable id="scrollView" class="add-category-max">
                <center>
                    <div style="width:100px;height:100px;overflow:hidden;margin-top:5px;">
                        <img id="categoryImage" src="{{categoryDefaultPhotoURL}}" width=100 sizing="cover"
                            align="middle" />
                    </div>
                </center>
                <p>Images for the category cannot exceed 150x150 pixels. You can go to <a href="https://imageresizer.com"
                        target="_blank">https://imageresizer.com</a> for adjusting the image dimensions.</p>
                <p id="categoryImageErrorText" style="color:red">Selected image is exceeding the standard size 150x150.
                    Please select an appropriate image.</p>
                <p style="font-size: 14px;">Add an image to category</p>
                <input type="file" id="categoryImagePicker" on-change="categoryImagePicker_onFileSelected"
                    accept="image/jpeg,image/png"></input>
                <paper-input id="categoryNameInput" class="mediumInput" placeholder="Name the new category"
                    value="{{categoryName}}" label="Category Name"></paper-input>
                <div id="umbrellaSubCategoriesContainer" style="padding-top:10px;">
                    <b>Categories:</b>
                    </br>
                    <template is="dom-repeat" items="[[selectedCategoriesArray]]">
                        <div class="smallCardContainer">
                            <paper-card class="categorySelectedCard" length="200px">
                                {{item.name}}
                                <iron-icon icon="icons:clear" on-click="removeCategoryIconClicked"
                                    class="rightJustifiedIcon">
                                </iron-icon>
                            </paper-card>
                        </div>
                    </template>
                    <paper-dropdown-menu id="addCategoryDropDown" is="addCategoryDropDown" class="largeDropdown"
                        label="Add categories to the list">
                        <paper-listbox id="addCategoryListbox" class="dropdown-content" slot="dropdown-content"
                            style="width:250px" selected="{{selectedCategoryId}}">
                            <template is="dom-repeat" items="{{categoryOptions}}">
                                <paper-item id="{{item.id}}">{{item.name}}</paper-item>
                            </template>
                        </paper-listbox>
                    </paper-dropdown-menu>
                </div>
                <paper-input id="borderColorInput" class="shortInput" value="{{selectedBorderColor}}"
                    label="Selected border color:" style="display: none;"></paper-input>
                <paper-swatch-picker class="colorPicker" color="{{selectedBorderColor}}" style="display: none;">
                </paper-swatch-picker>
                <br />
                <div id="leadershipInfoDiv">
                    <p> Group Leader information</p>
                    <paper-input id="leaderNameInput" class="mediumInput" placeholder="Name" value="{{leaderName}}"
                        label="Name"></paper-input>
                    <paper-input id="leaderEmailInput" class="mediumInput" placeholder="Email address"
                        value="{{leaderEmail}}" label="Email Address"></paper-input>
                    <gold-phone-input id="leaderPhoneInput" class="mediumInput" placeholder="Phone number"
                        value="{{leaderPhone}}" auto-validate error-message="Invalid Phone number" label="Phone number">
                    </gold-phone-input>
                </div>
            </paper-dialog-scrollable>
            <br />
            <div class="buttonsBottom">
                <paper-button id="submitMinistyButton" class="button" style="float:right" on-click="addButtonClicked">
                    Add</paper-button>
                <paper-button id="deleteMinistyButton" class="button" style="float:right"
                    on-click="deleteCategoryButtonClicked">Delete</paper-button>
            </div>
        </div>
        <paper-dialog id="confirmDeleteCategoryDialog" modal>
            <h3>Deleting category</h3>
            <p>You're about to delete the last category under an umbrella category. <br/> 
                This action will delete the Umbrella category as well.<br/> 
                Are you sure you want to delete this subcategory?
            </p>
            <div style="float: right;">
                <paper-button style="background: #009688;color:white;" dialog-dismiss>Cancel</paper-button>
                <paper-button style="background: #009688;color:white;" dialog-confirm autofocus on-click="confirmDeleteCategoryButtonClicked">Confirm</paper-button>
            </div>
        </paper-dialog>
        <dialog-busy-indicator modal id="busyIndicator"></dialog-busy-indicator>
    </template>
    <script>
        class CategoryDialog extends customElements.get('paper-dialog') {
            static get is() {
                return 'category-dialog';
            }
            static get properties() {
                return {
                    categoryDefaultPhotoURL: { type: String, value: '../../images/avatar_placeholder.png' },
                    imageToUpload: { type: Array, value: [] },
                    categoriesArray: { type: Array, value: [] },
                    selectedBorderColor: { type: String, value: '' },
                    isEditing: { type: Boolean, value: '' },
                    categoryId: { type: Number, value: '' },
                    categoryName: { type: String, value: ''},
                    iconUrl: { type: String, value: '' },
                    category: { type: Object, value: {} },
                    leaderName: { type: String, value: '' },
                    leaderEmail: { type: String, value: '' },
                    leaderPhone: { type: String, value: '' },
                    categoryScreen: { type: Object, value: {} },
                    createUmbrellaCategory: { type: Object, value: {} },
                    isUmbrellaCategory: { type: Boolean, value: false },
                    selectedCategoriesArray: { type: Array, value: [] },
                    subCategoriesArray: { type: Array, value: [] },
                    categoryOptions: { type: Array, value: [] },
                    fullCategoryOptions: { type: Array, value: [] },
                    categories: { type: Array, value: [] },
                    selectedCategoryId: { type: Number, value: -1, observer: 'onCategorySelected' },
                };
            }
            ready() {
                super.ready();
                document.body.appendChild(this.$.confirmDeleteCategoryDialog);
            }
            // *********************************************** //
            //                 CONFIRM ACTION
            // *********************************************** //
            onCancelButtonClicked() {
                this.close();
            }
            deleteCategoryButtonClicked() {
                var isLastSubcategoryOfAnUmbrellCategory = false;
                this.fullCategoryOptions.forEach(element => {
                    if(element.isUmbrellaCategory){
                        element.subCategoriesArray.forEach(subCategory => {
                            if(subCategory == this.categoryId && element.subCategoriesArray.length == 1){
                                isLastSubcategoryOfAnUmbrellCategory = true;
                            }
                        });
                    }
                });
                if(isLastSubcategoryOfAnUmbrellCategory){
                    this.$.confirmDeleteCategoryDialog.open();
                } else {
                    this.showBusyIndicator(true);
                    this.sendDeleteCategoryRequest();
                }
            }
            addButtonClicked() {
                if (this.verifyCategoryInputs()) {
                    this.showBusyIndicator(true);
                    this.$.addCategoryErrorText.innerHTML = '';
                    if (this.imageToUpload != null && this.imageToUpload.length > 0) {
                        //if image changed, upload before saving category information
                        this.uploadCategoryImage();
                    } else {
                        if (this.isEditing) {
                            this.sendEditCategoryReq();
                        } else {
                            this.sendAddCategoryReq();
                        }
                    }
                }
            }
            removeCategoryIconClicked(e) {
                var categoryToBeRemoved = e.model.__data.item;
                var array = []
                this.selectedCategoriesArray.forEach(selectedElement => {
                    if (selectedElement.id != categoryToBeRemoved.id) {
                        array.push(selectedElement)
                    }
                });
                this.selectedCategoriesArray = [];
                this.selectedCategoriesArray = array;
                this.sortCategoryArray(this.selectedCategoriesArray);
                this.refreshCategorySelectOptions();
            }
            confirmDeleteCategoryButtonClicked(){
                this.showBusyIndicator(true);
                this.sendDeleteCategoryRequest();
            }


            // *********************************************** //
            //                 OBSERVER METHODS
            // *********************************************** //
            onCategorySelected() {
                if (this.selectedCategoryId > -1) {
                    this.$.addCategoryDropDown.invalid = false;
                    var selectedCategoryObj = this.categoryOptions[this.selectedCategoryId]
                    var alreadyExists = false
                    this.selectedCategoriesArray.forEach(selectedElement => {
                        if (selectedElement.id == selectedCategoryObj.id) {
                            alreadyExists = true
                        }
                    });
                    if (!alreadyExists) {
                        this.selectedCategoriesArray.push(selectedCategoryObj);
                    }
                    var array = this.selectedCategoriesArray;
                    this.selectedCategoriesArray = [];
                    this.selectedCategoriesArray = array;
                    this.sortCategoryArray(this.selectedCategoriesArray);
                    this.$.addCategoryListbox.selected = -1;
                    this.refreshCategorySelectOptions();
                }
            }


            // *********************************************** //
            //                 OTHER METHODS
            // *********************************************** //
            verifyCategoryInputs() {
                this.$.addCategoryErrorText.innerHTML = "Please fill all fields.";
                this.$.categoryNameInput.invalid = false;
                this.$.addCategoryDropDown.invalid = false;
                if (this.categoryName.length < 1) {
                    this.$.categoryNameInput.invalid = true;
                    console.log('check for info title failed');
                } else if (this.isDuplicatedCategoryTitle(this.categoryName)) {
                    console.log('Category title is a duplicate.');
                    this.$.categoryNameInput.invalid = true;
                    this.$.addCategoryErrorText.innerHTML = 'That name is already in use.';
                } else if (this.$.leaderPhoneInput.invalid) {
                    console.log('Phone number is not valid.');
                    this.$.addCategoryErrorText.innerHTML = 'Phone number is not valid.';
                } else if (this.isUmbrellaCategory && this.selectedCategoriesArray.length == 0) {
                    console.log('No subcategories added for umbrella category.');
                    this.$.addCategoryErrorText.innerHTML = 'Please select at least one category.';
                    this.$.addCategoryDropDown.invalid = true;
                }
                else {
                    return true;
                }
                return false;
            }
            clearAddCategoryInputs() {
                this.subCategoriesArray = [];
                this.isUmbrellaCategory = false;
                this.$.addCategoryErrorText.innerHTML = "";
                this.$.categoryNameInput.invalid = false;
                this.$.addCategoryDropDown.invalid = false;
                this.iconUrl = '';
                this.categoryName = "";
                this.selectedBorderColor = "";
                this.leaderName = '';
                this.leaderEmail = '';
                this.leaderFullName = '';
                this.leaderPhone = '';
                this.$.categoryImagePicker.value = '';
                this.$.categoryImageErrorText.style.display = "none";
                this.selectedCategoriesArray = [];
                var PolymerDom = this;
                setTimeout(function () { PolymerDom.resetScroll(); }, 50);
            }
            isDuplicatedCategoryTitle(categoryName) {
                for (var categoryObjIndex in this.categoriesArray) {
                    if (this.categoriesArray[categoryObjIndex].name == categoryName) {
                        if (this.isEditing && this.categoriesArray[categoryObjIndex].id == this.categoryId) {
                            continue;
                        }
                        return true;
                    }
                }
                return false;
            }
            setEditMode(isEditing) {
                this.isEditing = isEditing;
                this.$.umbrellaSubCategoriesContainer.style.display = "none";
                if (this.isUmbrellaCategory) {
                    this.$.leadershipInfoDiv.style.display = "none";
                } else {
                    this.$.leadershipInfoDiv.style.display = "block";
                }
                if (this.isEditing) {
                    this.$.submitMinistyButton.innerHTML = "Update";
                    this.$.deleteMinistyButton.hidden = false;
                    this.$.title.innerHTML = "Edit Category";
                    if (this.iconUrl != null) {
                        this.$.categoryImage.src = this.iconUrl;
                    } else {
                        this.$.categoryImage.src = this.categoryDefaultPhotoURL;
                    }
                    if (this.isUmbrellaCategory) {
                        this.$.title.innerHTML = "Edit Umbrella Category";
                        this.$.umbrellaSubCategoriesContainer.style.display = "inline";
                    }
                } else {
                    this.$.submitMinistyButton.innerHTML = "Add";
                    this.$.deleteMinistyButton.hidden = true;
                    if (this.isUmbrellaCategory) {
                        this.$.title.innerHTML = "Add Umbrella Category";
                        this.$.umbrellaSubCategoriesContainer.style.display = "inline";
                    } else {
                        this.$.title.innerHTML = "Add Category"
                    }
                    this.$.categoryImage.src = this.categoryDefaultPhotoURL;
                }
                this.sendGetCategoriesReq();
            }
            uploadCategoryImage() {
                amazonS3Helper.uploadImage(this.imageToUpload[0], this,
                    function (awsKey, PolymerDom) {
                        console.log('Completed:', awsKey);
                        console.log('File successfully uploaded to:', awsKey);
                        PolymerDom.iconUrl = (appGlobals.isDevEnvironment() ? 'https://yourappstudio-dev.s3.amazonaws.com/' : 'https://yourappstudio-prod.s3.amazonaws.com/') + awsKey;
                        console.log('Icon url:', PolymerDom.iconUrl);
                        if (PolymerDom.isEditing) {
                            PolymerDom.sendEditCategoryReq();
                        } else {
                            PolymerDom.sendAddCategoryReq();
                        }
                        PolymerDom.imageToUpload = [];
                    },
                    function (reason, PolymerDom) {
                        PolymerDom.parent.showBusyIndicator(false);
                        PolymerDom.parent.showToastFailure("Failed to upload Image: " + reason);
                        console.log('File did not upload sucessfully:', reason);
                    }
                );
            }
            sortCategoryArray(array) {
                array.sort(function (a, b) {
                    if (a.name < b.name) { return -1; }
                    if (a.name > b.name) { return 1; }
                    return 0;
                });
            }
            resetScroll() {
                this.$.scrollView.$.scrollable.scrollTop = 0;
            }
            // Busy indicator and status toast functionality
            showBusyIndicator(shouldShow) {
                if (shouldShow) {
                    this.$.busyIndicator.show();
                } else {
                    this.$.busyIndicator.close();
                }
            }
            categoryImagePicker_onFileSelected(evt) {
                this.imageToUpload = evt.target.files;
                var file, img;
                var PolymerDom = this;
                if ((file = this.imageToUpload[0])) {
                    img = new Image();
                    img.onload = function () {
                        if (this.width > 150 || this.height > 150) {
                            PolymerDom.imageToUpload = [];
                            PolymerDom.$.categoryImagePicker.value = '';
                            PolymerDom.$.categoryImageErrorText.style.display = "block";
                        } else {
                            if (PolymerDom.imageToUpload[0]) {
                                loadImage(Polymer.dom(PolymerDom.root).querySelector('#categoryImage'), PolymerDom.imageToUpload[0]);
                                Polymer.dom(PolymerDom.root).querySelector('#categoryImage').backgroundColor = "white";
                            }
                            PolymerDom.$.categoryImageErrorText.style.display = "none";
                        }
                    };
                    var _URL = window.URL || window.webkitURL;
                    img.src = _URL.createObjectURL(file);
                }
            }
            refreshCategorySelectOptions() {
                this.categoryOptions = [];
                this.categories.forEach(categoryObj => {
                    var categorySelectd = false;
                    this.selectedCategoriesArray.forEach(element => {
                        if (categoryObj.id == element.id) {
                            categorySelectd = true;
                        }
                    });
                    if (!categorySelectd) {
                        this.categoryOptions.push(categoryObj);
                    }
                });
            }


            //*****************************************************************************//

            // Ajax Functions //

            //*****************************************************************************//
            // *** Add Group Ajax *** //
            sendAddCategoryReq() {
                this.$.addCategoryAjax.url = appGlobals.categoryUrl();
                var selectedCategoryIds = [];
                this.selectedCategoriesArray.forEach(element => {
                    selectedCategoryIds.push(element.id);
                });
                this.$.addCategoryAjax.body = JSON.stringify({
                    name: this.categoryName,
                    businessId: currentUser.getBusinessId(),
                    iconUrl: this.iconUrl,
                    leaderEmail: this.leaderEmail,
                    leaderFullName: this.leaderName,
                    leaderPhone: this.leaderPhone,
                    borderColor: this.selectedBorderColor,
                    isUmbrellaCategory: this.isUmbrellaCategory ? 1 : 0,
                    umbrellaSubCategories: selectedCategoryIds
                });
                this.$.addCategoryAjax.contentType = "application/json";
                this.$.addCategoryAjax.accessTokenValue = { token: authHelper.getToken() };;
                this.$.addCategoryAjax.generateRequest();
            }
            sendEditCategoryReq() {
                var selectedCategoryIds = [];
                this.selectedCategoriesArray.forEach(element => {
                    selectedCategoryIds.push(element.id);
                });
                this.$.editCategoryAjax.url = appGlobals.categoryUrl();
                this.$.editCategoryAjax.body = JSON.stringify({
                    name: this.categoryName,
                    businessId: currentUser.getBusinessId(),
                    iconUrl: this.iconUrl,
                    id: this.categoryId,
                    leaderEmail: this.leaderEmail,
                    leaderFullName: this.leaderName,
                    leaderPhone: this.leaderPhone,
                    borderColor: this.selectedBorderColor,
                    isUmbrellaCategory: this.isUmbrellaCategory,
                    umbrellaSubCategories: selectedCategoryIds
                });
                console.log(this.$.editCategoryAjax.body);
                this.$.editCategoryAjax.contentType = "application/json";
                this.$.editCategoryAjax.accessTokenValue = { token: authHelper.getToken() };;
                this.$.editCategoryAjax.generateRequest();
            }
            sendDeleteCategoryRequest() {
                this.$.deleteCategoryAjax.url = appGlobals.deleteCategoryUrl(this.categoryId);
                this.$.deleteCategoryAjax.contentType = "application/json";
                this.$.deleteCategoryAjax.body = JSON.stringify({ categoryId: this.categoryId });;
                this.$.deleteCategoryAjax.accessTokenValue = { token: authHelper.getToken() };;
                this.$.deleteCategoryAjax.generateRequest();
            }
            // Update life time counters
            sendUpdateLifeTimeCountersReq() {
                this.showBusyIndicator(true);
                this.$.updateLifeTimeCountersAjax.url = appGlobals.feedbackUrl();
                this.$.updateLifeTimeCountersAjax.body = JSON.stringify({
                    businessId: currentUser.getBusinessId(),
                    type: 2,
                    count: 1
                });
                this.$.updateLifeTimeCountersAjax.contentType = "application/json";
                this.$.updateLifeTimeCountersAjax.headers = { token: authHelper.getToken() };
                this.$.updateLifeTimeCountersAjax.generateRequest();
            }
            // Get categories
            sendGetCategoriesReq() {
                this.showBusyIndicator(true);
                this.$.getCategoriesAjax.url = appGlobals.getCategoriesUrl(currentUser.getBusinessId());
                this.$.getCategoriesAjax.body = "";
                this.$.getCategoriesAjax.contentType = "application/json";
                this.$.getCategoriesAjax.headers = { token: authHelper.getToken() };
                this.$.getCategoriesAjax.generateRequest();
            }
            handleAddCategoryApiResponse() {
                this.showBusyIndicator(false);
                this.close();
                this.sendUpdateLifeTimeCountersReq();
                this.categoryScreen.sendGetCategoriesReq();
            }
            handleDeleteCategoryApiResponse(request) {
                this.showBusyIndicator(false);
                this.close();
                var response = request.detail.response;
                this.categoryScreen.sendGetCategoriesReq();
                this.categoryScreen.sendGetLifeTimeCountersReq();
            }
            handleApiResponse(request) {
                this.showBusyIndicator(false);
                this.close();
                var response = request.detail.response;
                this.categoryScreen.sendGetCategoriesReq();
            }
            handleUpdateLifeTimeCountersResponse(request) {
                this.categoryScreen.sendGetLifeTimeCountersReq();
                this.showBusyIndicator(false);
                var apiResponse = apiHelper.getResponseData(request);
                this.close();
            }
            errorApiResponse(error) {
                this.showBusyIndicator(false);
                if (error.detail.request.status == 401) {
                    var PolymerDom = this;
                    YourAppStudioNav.refreshOrLogout(
                        function onRefreshed() {
                            if (this.isEditing) {
                                this.sendEditCategoryReq();
                            } else {
                                this.sendAddCategoryReq();
                            }
                        }
                    );
                }
            }
            errorDeleteApiResponse(error) {
                this.showBusyIndicator(false);
                if (error.detail.request.status == 401) {
                    var PolymerDom = this;
                    YourAppStudioNav.refreshOrLogout(
                        function onRefreshed() {
                            this.sendDeleteCategoryRequest();
                        }
                    );
                }
            }
            errorUpdateLifeTimeCountersResponse(error) {
                if (error.detail.request.status == 401) {
                    var PolymerDom = this;
                    YourAppStudioNav.refreshOrLogout(
                        function onRefreshed() {
                            PolymerDom.sendUpdateLifeTimeCountersReq();
                        }
                    );
                } else {
                    this.close();
                }
                this.showBusyIndicator(false);
            }
            handleGetCategoriesResponse(request) {
                this.showBusyIndicator(false);
                var apiResponse = apiHelper.getResponseData(request);
                this.fullCategoryOptions = apiResponse.data;
                var array = [];
                apiResponse.data.forEach(element => {
                    if (!element.isUmbrellaCategory) {
                        array.push(element);
                    }
                });
                this.categoryOptions = this.categories = array;
                this.selectedCategoriesArray = [];
                this.subCategoriesArray.forEach(element => {
                    this.categoryOptions.forEach(category => {
                        if (element == category.id) {
                            this.selectedCategoriesArray.push(category);
                        }
                    });
                });
                this.sortCategoryArray(this.selectedCategoriesArray);
                this.refreshCategorySelectOptions();
            }
            errorGetCategoriesResponse(error) {
                if (error.detail.request.status == 401) {
                    var PolymerDom = this;
                    YourAppStudioNav.refreshOrLogout(
                        function onRefreshed() {
                            PolymerDom.sendGetCategoriesReq();
                        }
                    );
                }
                this.showBusyIndicator(false);
            }
        }
        window.customElements.define(CategoryDialog.is, CategoryDialog);
    </script>
    <script src="../assets/js/evaporate.js"></script>
    <script src="/scripts/utils/s3Helper.js"></script>
    <script src="/scripts/utils/currentUser.js"></script>
</dom-module>