// Import the Library 
import VuePouch from 'vue-pouch-db';
 
// VuePouchDB Instance 
Vue.use(VuePouchDB);

// Bucket - Vue Pouch DB Config Object 
// This is a general and fast overview 
// How to define bucket initially in the instance 
const bucket = new VuePouchDB.Bucket({
  // Main config Object. This is the top level 
  // config object. Where global config 
  // are shared with each database. 
  config: {
    // Remote Server 
    remote: "COUCHDB SERVER",
 
    // Is DB Remote Only?, default: false 
    remoteOnly: false,
 
    // db.allDocs({options}) 
    allDocs: {
      include_docs: true
    },
 
    // new Pouch({options}) 
    options: {
      ajax: {
        cache: true
      }
    },
 
    // Pouch.sync({option}) for every Instance 
    sync: {
      since: 0,
      live:  true,
      retry: true
    },
 
    // db.changes({option}) 
    changes: {
      since: 'now',
      live: true,
      include_docs: true
    },
 
    // Global onChange events 
    // for each database. 
    // The functions here are passed to each DB 
    // db.changes().on(() => {}) 
    onChanges(change) {
      console.log("Change: ", change);
    },
    onPaused(error) {
      console.log("Paused", error);
    },
    onActive() {
      console.log("Active");
    },
    onDenied(error) {
      console.log("Denied", error);
    },
    onComplete() {
      console.log("Completed");
    },
    onError(error) {
      console.log("Error", error);
    },
    cancel(cancel) {
      // 'cancel' var is a function to be called 
      // when something bad happens. It will 
      // Cancel the watch event on CouchDB 
    }
  },
 
  // List of PouchDB plugins 
  plugins: [
    require('pouchdb-plugin')
  ],
 
  // Actions are shared across the 
  // bucket instance. 
  // Think of them as helper methods to bundle 
  // several sets of commands into a single method. 
  // Can be accessed through this.$bucket.[method name] 
  actions: {
    addDoc(arg) {
      // this is $bucket instance 
      this.db('projects').({
        _id: 'document_id'
        data: {}
      }, function () {});
    }
  }
 
  // Databases 
  // You can define / instanciate 
  // a per database config file. 
  // this will put the database into the internal 
  // state and also, you can define custom "options" 
  // for the database Instance (on: new PouchDB(options)) 
  _users: {
    // Is remote only ? 
    // The _users database lives only 
    // in the server, so its only remote 
    remoteOnly: true
  },
 
  // 'projects' key -> Database Name, ex: couchdb.com/projects 
  projects: {
    // PouchDB.sync Options 
    sync: {
      push: {
        // config for push 
      },
      pull: {
        filter: 'projects/by_user',
        query_params: { "name": "sadi" }
      }
    }
 
  }
});
 
// Vue Application Startup 
const app = new Vue({
  // Include the Bucket Instance 
  // into the root Vue application 
  bucket,
  methods: {
    // Simple example how to delete a 
    // document in CouchDB through VuePouchDB 
    // Keep in mind, that the state is synced 
    // and when the request is sent to couchdb 
    // the state will update the object and 
    // add the property _deleted: true 
    remove({ _id, _rev }) {
      this.$bucket.db('projects').put({
        _id, _rev,
        _deleted: true
      });
    }
  }
});

Vue.component({
  created: {
    // Access the internal VuePouchDB state 
    // the internal state is reactive, and any mingling 
    // with the state may break the plugin. As it wont 
    // be able to track changes. 
    this.$bucket.state;
 
    // Programmatic way to instantiate a database 
    // This is the same as setting up dbsetup object 
    // into the vue component. 
    this.$bucket.db(dbname, options);
 
    // Close a database, and remove all its watchers 
    // and events related to it. 
    // Internally it will close the DB, delete the internal 
    // state (not the indexDB database locally) 
    // remove all the change watchers. 
    this.$bucket.closedb(dbname);
  }
});

Vue.component({
  dbsetup: {
    // the database name 
    // both keys can take a function 
    // that is bound to the component 
    // instance 
    name: "dbname",
    // the config object 
    // When a database is created the "options" 
    // key is taken from the context and applied 
    // to the database. 
    // Note: does not work for already instantiated 
    // databases. 
    options: {}
  }
});

 
// Import mapQueries method 
import { mapQueries } from 'vue-pouch-db';
 
// Inside a Vue component 
Vue.component({
  template: `<div>{{ this.docs }}, {{ this.files }}</div>`,
  data: function {
    return {
        dbname: 'projects'
    };
  },
  dbsetup: {
    name: function () {
      // 'this' is bound to the component 
      // internal state 
      return {
        this.dbname;
      };
    },
    options: function () {
      return {};
    }
  },
  computed: {
    ...mapQueries({
      docs: {
        type: 'anode'
      },
      files: function () {
        return {
          file: {
            $in: ['file']
          }
        };
      }
    })
  },
  methods: {
    addDocs: function (_id, data) {
      // You can modify the state 
      // internally by assigning data 
      // to the internal computed properties 
      // and it will update the database automatically 
      // Can be an object or an Array of items you 
      // would like to update. 
      this.docs = {
        _id: _id,
        type: 'anode',
        data: data
      };
    }
  }
});