<polymer-element name="jso-opencga-create-analysis" attributes="projectList">
    <template>
        <style>
            :host {
                display: block;
                padding-left: 30px;
                padding-top: 10px;
            }

            label {
                display: inline-block;
                color: #666;
                margin-top: 10px;
            }

            label::after {
                content: ':'
            }

            .action {
                margin-top: 30px;
            }

            .message {
                margin-top: 20px;
            }

        </style>


        <form id="form" vertical layout>

            <label>Project</label>

            <div class="dropdown">
                <div tabindex="-1" class="button">
                    <jso-opencga-project-item project="{{selectedProject}}"></jso-opencga-project-item>
                </div>
                <ul>
                    <template repeat="{{project in projectList}}">
                        <li>
                            <jso-opencga-project-item
                                    project="{{project}}"
                                    data-selected="{{selectedProject == project}}"
                                    on-mousedown="{{handleProjectClick}}">
                            </jso-opencga-project-item>
                        </li>
                    </template>
                </ul>
            </div>

            <label>Study</label>
            <div class="dropdown">
                <div tabindex="-1" class="button">
                    <jso-opencga-study-item study="{{selectedStudy}}"></jso-opencga-study-item>
                </div>
                <ul>
                    <template repeat="{{study in selectedProject.studies}}">
                        <li>
                            <jso-opencga-study-item
                                    study="{{study}}"
                                    data-selected="{{selectedStudy == study}}"
                                    on-mousedown="{{handleStudyClick}}">
                            </jso-opencga-study-item>
                        </li>
                    </template>
                </ul>
            </div>
            <label>Name</label> <input type="text" id="name" value="{{name}}" required pattern="[a-zA-Z0-9\s]+">
            <label>Alias</label> <input type="text" id="alias" value="{{alias}}" required pattern="[a-zA-Z0-9]+">
            <label>Description</label> <input type="text" id="description" value="{{description}}" required pattern="[a-zA-Z0-9\s]+">

            <div class="button action" on-click="{{handleForm}}">Create</div>

        </form>
        <div class="message">{{message}}</div>
    </template>
    <script>
        Polymer({
            created: function () {
                this.name = '';
                this.alias = '';
                this.description = '';
                this.type = '';

                this.selectedProject;


                this.message = '';
            },
            handleProjectClick: function (e) {
                this.selectedProject = e.target.project;
            },
            handleStudyClick: function (e) {
                this.selectedStudy = e.target.study;
            },
            handleForm: function (e) {
                var me = this;
                this.message = '';
                if (this.$.form.checkValidity()) {
                    OpencgaManager.analysis.create({
                        query: {
                            sid: Cookies('bioinfo_sid'),
                            name: this.name,
                            alias: this.alias,
                            description: this.description,
                            studyId: this.selectedStudy.id

                        },
                        request: {
                            success: function (response) {
                                if (response.response[0].errorMsg === '' || response.response[0].errorMsg == null) {
                                    me.message = 'Analysis created sucessfully.';
                                } else {
                                    me.message = response.response[0].errorMsg;
                                }
                            },
                            error: function () {
                                alert('Server error, try again later.');
                            }
                        }
                    });
                }
            }
        });
    </script>
</polymer-element>