
<template>
  <div>
    <h1>Settings</h1>

    <div v-if="isSaved" class="notice notice-success is-dismissible">
      <p><strong>Saved.</strong></p>
    </div>

    <h2>Storage paths</h2>

    <div class="error" v-if="hasErrors()">
      <p v-for="error in errors">
        <strong>ERROR:</strong> {{error}}
      </p>
    </div>

    <table class="form-table">
      <tbody>
        <tr v-for="pathId in pathsIds">
          <th scope="row"><label :for="'path' + pathId">Path</label></th>
          <td>
            <input v-model="paths[pathId]" :name="'path' + pathId" :id="'path' + pathId" type="text" value="" class="regular-text"/>
            <a v-if="pathId > 1" href="" @click="delPath($event, pathId)">[delete]</a>
          </td>
        </tr>
      </tbody>
    </table>

    <div>
      <input type="submit" name="addpath" id="addpath" class="button button-primary" value="Add path" @click="addPath($event)"/>
    </div>

    <div class="submit">
      <input type="submit" name="save" id="save" class="button button-primary" value="Save settings" @click="save($event)"/>
    </div>
  </div>
</template>


<script>
import API from './../api';


export default {
    data() {
        return {
            pathId: 2,
            pathsIds: [1],
            paths: {},

            errors: {},
            isSaved: false
        };
    },

    created() {
        API.getSettings().then((res) => {
            if (res.success) {
                this.setPaths(res.data.settings.storages);
            }
        });
    },

    methods: {
        addPath(evt) {
            evt.preventDefault();

            this.pathsIds.push(this.pathId);
            this.pathId += 1;
        },

        delPath(evt, pathId) {
            evt.preventDefault();

            var newPaths = [];
            for (var i in this.pathsIds) {
                if (this.pathsIds[i] !== pathId) {
                    newPaths.push(this.pathsIds[i]);
                } else {
                    delete this.paths[pathId];
                }
            }

            this.pathsIds = newPaths;
        },

        hasErrors() {
            return Object.keys(this.errors).length > 0;
        },

        setPaths(paths) {
            if (paths.length === 0) {
                return;
            }

            var newPathId = 1;
            var newPathsIds = [];

            for (var i = 0; i < paths.length; i++) {
                var pathId = (i + 1).toString();
                var path = paths[i];

                this.paths[pathId] = path;
                newPathsIds.push(i + 1);
                newPathId = i + 2;
            }

            this.pathId = newPathId;
            this.pathsIds = newPathsIds;
        },

        getPaths() {
            var paths = Object.values(this.paths);
            return paths.filter(function(val) { return val; });
        },

        save(evt) {
            evt.preventDefault();

            API.saveSettings({
                paths: this.getPaths()
            }).then((res) => {
                if (res.success) {
                    this.showSuccessMessage();
                } else {
                    if (res.data.paths) {
                        this.setErrorMessage(res.data.paths);
                    }
                }
            });
        },

        showSuccessMessage() {
            this.isSaved = true;
            this.errors = [];

            setTimeout(() => {
                this.isSaved = false;
            }, 5000);
        },

        setErrorMessage(errors) {
            this.isSaved = false;
            this.errors = errors;
        }
    }
};
</script>
