<template>
<div>
    <bt-mainloader/>
    <h3>Input Text Test</h3>
    <bt-grid cols="4" floater>
        <bt-gridcol><h5>Testing for</h5></bt-gridcol>
        <bt-gridcol><h5>Mega input</h5></bt-gridcol>
        <bt-gridcol><h5>Normal input</h5></bt-gridcol>
        <bt-gridcol><h5>Output</h5></bt-gridcol>
        <!-- Row 1 -->
        <bt-gridcol><bt-datepicker id="d1" v-model="datenormal" data-type="normal" title="Pick a date" mega/></bt-gridcol>
        <bt-gridcol><bt-datepicker id="d2" v-model="dateiso" data-type="isostring"/></bt-gridcol>
        <bt-gridcol><bt-datepicker id="d3" v-model="datenumber" data-type="number"/></bt-gridcol>
        <bt-gridcol>
            <p>Date Picker</p>
            <p>{{datenormal}}</p>
            <p>{{dateiso}}</p>
            <p>{{datenumber}}</p>
        </bt-gridcol>
        <!-- Row 2 -->
        <bt-gridcol><bt-timepicker id="tm1" v-model="timeval" mega title="Pick a time"/></bt-gridcol>
        <bt-gridcol><bt-timepicker id="tm2" v-model="timeval" format="hh:mm" minute-interval="5"/></bt-gridcol>
        <bt-gridcol></bt-gridcol>
        <bt-gridcol>{{timeval}}</bt-gridcol>
        <!-- Row 3 -->
        <bt-gridcol>Model binding</bt-gridcol>
        <bt-gridcol><bt-text id="row11" title="Enter some value" v-model="row1" rfq rfo mega v-validate="'required|max:20'" :message="errors.first('row11')" placeholder="text value input" @keyenter="eventer"/></bt-gridcol>
        <bt-gridcol><bt-text id="row12" v-model="row1" v-validate="'required|doublenum'" :message="errors.first('row12')" placeholder="text value some"/></bt-gridcol>
        <bt-gridcol><bt-label title="Output for this row" :value="row1"/></bt-gridcol>
        <!-- Row 4 -->
        <bt-gridcol><span class="tt-t tt-large" aria-label="Some big comments that will be shown as tooltip">Read only</span></bt-gridcol>
        <bt-gridcol><bt-text id="row21" title="Enter some value and really really bi big label to see how it occupies screen space" mega v-model="row2" readonly/></bt-gridcol>
        <bt-gridcol><bt-text id="row22" v-model="row2"/></bt-gridcol>
        <bt-gridcol>{{row2}}</bt-gridcol>
        <!-- Row 5 -->
        <bt-gridcol>Non Editable only</bt-gridcol>
        <bt-gridcol><bt-text id="row31" title="Enter some value" mega v-model="row3" :editable="canEdit" v-validate="'required|max:20'" :message="errors.first('row31')"/></bt-gridcol>
        <bt-gridcol><bt-text id="row32" v-model="row3" :editable="canEdit" v-validate="'required|max:20'" :message="errors.first('row32')"/></bt-gridcol>
        <bt-gridcol><bt-label title="Output row 2" :value="row3" mega/></bt-gridcol>
        <!-- Row 6 -->
        <bt-gridcol>Other input types</bt-gridcol>
        <bt-gridcol><bt-text id="row41" title="Enter Email" type="email" mega v-model="email" v-validate="'email'" :message="errors.first('row41')"/></bt-gridcol>
        <bt-gridcol><bt-text id="row42" title="Enter password" type="password" v-model="password"/></bt-gridcol>
        <bt-gridcol><p>{{email}}</p><p>{{password}}</p></bt-gridcol>
        <!-- Row 7 -->
        <!-- <bt-gridcol>Autocomplete input</bt-gridcol>
        <bt-gridcol><bt-autocomplete id="row51" title="Autocomplete from local list" mega v-model="autocomp" :source="result"/></bt-gridcol>
        <bt-gridcol><bt-autocomplete id="row52" title="Autocomplete from server call"  mega v-model="autoComp1" :source="getCountry" valueKey="code" labelKey="name"/></bt-gridcol>
        <bt-gridcol><p>{{autocomp}}</p><p>{{autoComp1}}</p></bt-gridcol> -->
        <!-- Row 8 -->
        <!-- <bt-gridcol span="2"><bt-textarea id="row71" mega v-model="area" v-validate.initial="'required|nohtml'" :message="errors.first('row71')"/></bt-gridcol>
        <bt-gridcol span="2"><bt-textarea id="row72" v-model="area" readonly/></bt-gridcol> -->
    </bt-grid>
<button @click="$events.emit('showModal|testModal')">Show modal</button>
<button @click="$events.emit('showLoad', 'Some loader text ...')">Show Loader</button>
<button @click="$events.emit('updateLoad', 'Updates loader text ...')">Update Loader</button>
<bt-modal id="testModal" type="large">
some dummy text value to be shown in modal
<div slot="footer">
    <bt-checkbox id="check1" name="chkGRP" value="CHECK1" v-model="chk1">Footer checkbox</bt-checkbox>
    <span class="spacer"></span>
    <bt-buttonpanel dir="right">
        <bt-button type="primary">Primary</bt-button>
        <bt-button type="secondary">Secondary</bt-button>
        <bt-button>Default</bt-button>
    </bt-buttonpanel>
</div>
</bt-modal>

<bt-modalform id="testModalForm">
some dummy text value to be shown in modal
<div slot="footer">
    <bt-checkbox id="check1" name="chkGRP" value="CHECK1" v-model="chk1">Footer checkbox</bt-checkbox>
    <span class="spacer"></span>
    <bt-buttonpanel dir="right">
        <bt-button type="primary">Primary</bt-button>
        <bt-button type="secondary">Secondary</bt-button>
        <bt-button>Default</bt-button>
    </bt-buttonpanel>
</div>
</bt-modalform>
<br/>
<router-link to="/">Back to Home</router-link>
</div>
</template>

<script>
import { forceUpperCase } from '../utils/utils'
import { camelCase, capitalize, snakeCase, toUpper } from 'lodash'
export default {
	name: 'TestInput',
	inject: ['$validator'],
	data() {
		return {
			canEdit: false,
			row1: '',
			row2: 'read only scenario',
			row3: 'Non editable scenario',
			area: '',
			email: '',
			password: '',
			autocomp: '',
			url: '',
			search: '',
			datenormal: '',
			dateiso: '',
			datenumber: '',
			timeval: {},
			result: ['ABC', 'DEF', 'HIJ', 'KLM', 'NOP', 'HUUNNS', 'ysyyduysud', 'dasdasdasdasdasd', 'dsfsdfsdfsdf', 'sdfdfsdfdfsdfdfv  sdfsfsdfsdf', 'dfdfsdfdfsdfsf'],
			autoComp1: '',
			chk1: false
		}
	},
	methods: {
		forceUpperCase,
		camelCase,
		capitalize,
		snakeCase,
		toUpper,
		getCountry(n) {
			return new Promise((resolve, reject) => {
				this.$http.get(`https://restcountries-v1.p.rapidapi.com/name/${n}`,
					{						headers: {							'X-RapidAPI-Host': 'restcountries-v1.p.rapidapi.com',
							'X-RapidAPI-Key': '8fcad5791amshebaa3caba7aa7cep164779jsn62140dbca561',
							'Access-Control-Allow-Origin': '*'						}					}).then(r => {
						console.log('Searching for ', n, ' got ', r.data)
						let list = []
						r.data.forEach(c => {
							list.push({ name: c.name, code: c.alpha3Code })
						})
						resolve(list)
					}).catch(e => {
						reject(e)
					})
			})
		},
		eventer(e) {
			console.log('Key pressed ...', e)
		}
	}
}
</script>
