// some data helpers

const dataFilter = Vue.component('data-filter', {
    data: function() {
	return {
	    currentKind: 'always-true',
	    kinds: ['month', 'day', 'year', 'always-true']
	};
    },
    computed: {
	currentKindComponent: function () {
	    return 'filter-' + this.currentKind.toLowerCase()
	}
    },
    template: `<table><tr>
    	    <td><select v-model="currentKind">
              <option
	      v-for="kind in kinds"
	      v-bind:key="kind"
	      >{{ kind }}</option>
            </select></td>
	  <component
	    v-bind:is="currentKindComponent"
	    ></component>
<TD><details><summary>Help</summary>
You can select a data filter to apply to the data. The "Always True"
filter does nothing. The day, month, year filters let you do your
calculations only on dates which match the given criteria.

For example, if you choose the month filter with month = 1, the
percentile analysis results will show you the trailing returns for days
only in January. For example, if you use an averaging period of 20 then
for each day in January we would compute the trailing 20 return. Or if you
used an averaging period of 1 then you could get the percentile statistics
one-day returns in January.
</details></TD>         
     </tr></table>
   `
});

Vue.component('filter-day', {
    data: function() {
	return {
	    kind: 'day',
	    value: 1,
	}
    },
    methods: {
	calc: function(rows) {
	    var myDay = parseInt(this.value);
	    console.log('filtering by day=: ' + myDay);
	    for (i=0; i<rows.length; i++) {
		checkElement(rows[i], 2, myDay);
	    }
	}
    },
    template: `
<TD> = <input v-model="value" 
    type="number" name="day" min="1" max="31"></TD>
    `
});

Vue.component('filter-month', {
    data: function() {
	return {
	    kind: 'month',
	    value: 1,
	}
    },
    methods: {
	calc: function(rows) {
	    var myMonth = parseInt(this.value);
	    console.log('filtering by month=: ' + myMonth);
	    for (i=0; i<rows.length; i++) {
		checkElement(rows[i], 1, myMonth);
	    }
	}
    },
    template: `
<TD> = <input v-model="value" 
    type="number" name="month" min="1" max="12"></TD>
    `
});


Vue.component('filter-year', {
    data: function() {
	return {
	    kind: 'year',
	    value: 1,
	}
    },
    methods: {
	calc: function(rows) {
	    var myYear = parseInt(this.value);
	    console.log('filtering by year=: ' + myYear);
	    for (i=0; i<rows.length; i++) {
		checkElement(rows[i], 0, myYear);
	    }
	}
    },
    template: `
<TD> = <input v-model="value" 
    type="number" name="year" min="1990" max="2200"></TD>
    `
});



Vue.component('filter-always-true', {
    data: function() {
	return {
	    'kind': 'always-true'
	}
    },
    methods: {
	calc: function(rows) {
	    for (i=0; i<rows.length; i++) {
		if (! ("valid" in rows[i])) {
		    rows[i]["valid"] = 1;
		}
	    }
	}
    },
    template: `
       <td>Always True</td>
    `
});


// ----------------------------------------------------------------------
// Routing stuff below
// ----------------------------------------------------------------------


const About = Vue.component('about', { // Will reference x-template with
    template: '#about'}               // id="about" in HTML file
			  );

const Help = Vue.component('help', { // Will reference x-template with
    template: '#help'}               // id="help" in HTML file
			  );

const Home = Vue.component('home', { // Will reference x-template with
    template: '#home',               // id="home" in HTML file
    data: function () {
	return {
	    'mainInfo': makeMainInfo(),
	};
    },
    methods: {
	simplePlot: function(plotid, plotx, ploty) {
	    return makeSimplePlot(plotid, plotx, ploty);
	},
	doCalc: function(event) {
	    console.log('start doCalc');
	    var filterComponents = this.$refs.dfilt.$children;
	    var filters = [];
	    for (i=0; i<filterComponents.length; i++) {
		filters.push(filterComponents[0]);
	    }
	    processData("main_output", null, this.mainInfo, filters);
	    console.log('end doCalc');
	}
    },
    components: {
	dataFilter: dataFilter
    }
}	  );


// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
    {
      path: '/',
      redirect: '/home'
    },    
    { path: '/home', component: Home },    
    { path: '/help', component: Help },
    { path: '/about', component: About }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')