import { toNative, Vue } from 'vue-facing-decorator';
import { globalState } from '../../app/global-state';
import { Component } from '../../app/vuetsx';

@Component
class CounterComponentComponent extends Vue {
	currentAge: number = 5;
	name: string = 'Justa Name';

	incrementCounter() {
		this.currentAge++;
	}

	getPlotData() {
		const rand = function (min, max) {
			const seed = 0;
			min = min === undefined ? 0 : min;
			max = max === undefined ? 1 : max;
			const _seed = (seed * 9301 + 49297) % 233280;
			return min + (_seed / 233280) * (max - min);
		};

		const chartColors = {
			red: 'rgb(255, 99, 132)',
			orange: 'rgb(255, 159, 64)',
			yellow: 'rgb(255, 205, 86)',
			green: 'rgb(75, 192, 192)',
			blue: 'rgb(54, 162, 235)',
			purple: 'rgb(153, 102, 255)',
			grey: 'rgb(201, 203, 207)',
		};

		const randomScalingFactor = function () {
			return Math.round(rand(-100, 100));
		};

		const MONTHS = [
			'January',
			'February',
			'March',
			'April',
			'May',
			'June',
			'July',
			'August',
			'September',
			'October',
			'November',
			'December',
		];
		const color = globalState.Chart.helpers.color;
		const barChartData = {
			labels: [
				'January',
				'February',
				'March',
				'April',
				'May',
				'June',
				'July',
			],
			datasets: [
				{
					label: 'Dataset 1',
					backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
					borderColor: chartColors.red,
					borderWidth: 1,
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
				},
				{
					label: 'Dataset 2',
					backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
					borderColor: chartColors.blue,
					borderWidth: 1,
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
				},
			],
		};

		return barChartData;
	}

	getSampleArgs() {
		return {
			name: this.name,
			age: this.currentAge,
		};
	}

	render(h) {
		return (
			<div>
				<h1>Counter TSX</h1>
				<p>Counter done the TSX way</p>
				<p>
					Current count:
					{' '}
					<strong>{this.currentAge}</strong>
				</p>
				<button
					onClick={() => {
						this.incrementCounter();
					}}
				>
					Increment
				</button>
				<input
					type="text"
					value={this.name}
					onChange={(e) => {
						this.name = e.target.value;
					}}
				/>
				<br />

				<br />
				<br />
				<br />
			</div>
		);
	}
}

const CounterComponent = toNative(CounterComponentComponent);
export default CounterComponent;