{% extends "base.html" %} {% block content %} {% load static %} {% load material_form %}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div class="srf-container">
	<div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
		<span class="srf-display-1 text-uppercase">Agromet Products</span><br /><br />
	</div>
	<div class="srf-flex justify-content-between srf-padding" id="app">
		<v-app>
			<v-overlay :value="loading_data">
				<v-card flat light style="background-color: transparent;">
					<v-card-title class="text-center"> Loading Data... </v-card-title>
					<v-card-actions class="text-center justify-center">
					  <v-progress-circular indeterminate color="primary"/>
					</v-card-actions>
				</v-card>
			</v-overlay>

			<v-form ref="form" v-model="isFormValid" enctype="multipart/form-data" method="POST" class="mb-10">
				{% csrf_token %}
				<v-row>
					<v-col cols="2" class="d-flex justify-left">
						<v-switch 
							v-model="filters.is_automatic"
							:label='filters.is_automatic?"Automatic Stations":"Manual Stations"'
							inset
						/>
					</v-col>
					<v-col cols="4">
						<v-autocomplete
							label="Select Station"
							:items="filteredStationList"
							item-value="id"
							item-text="name"
							v-model="requestData.stationId"
							hint="*Required"
							persistent-hint
							:rules="[rules.required]"
						/>
					</v-col>
                    <v-col cols="3">
                        <v-autocomplete
							label="Select Element"
							:items="Object.keys(elements)"
							v-model="requestData.element"
							required
							hint="*Required"
							persistent-hint
						/>
                    </v-col>
					<v-col cols="2">
                        <v-autocomplete
							label="Select Product"
							:items="Object.keys(filteredElements[requestData.element])"
							v-model="requestData.product"
							required
							hint="*Required"
							:rules="[rules.required]"
							persistent-hint
						/>
					</v-col>
					<v-col cols="1">
						<v-btn v-if="requestData.product" icon @click="showing_product_info=!showing_product_info"><v-icon>mdi-information</v-icon> </v-btn>
					</v-col>
				</v-row>
				<v-row>
					<v-col cols="12">
						<v-alert
							v-if="showing_product_info"
							type="info"
							text
							:dismissible="true"
							outlined
							@input="showing_product_info = false"
						>
							[[ elements[requestData.element][requestData.product].info ]]
						</v-alert>
					</v-col>
				</v-row>
				<v-row>
					<v-col cols="2" v-if="parameterLabels.numericParam1">
						<v-text-field
							v-model="requestData.numericParam1"
							:rules="[rules.required, rules.numeric]"
							:label="parameterLabels.numericParam1"
						/>
					</v-col>
					<v-col cols="2" v-if="parameterLabels.numericParam2">
						<v-text-field
							v-model="requestData.numericParam2"
							:rules="[rules.required, rules.numeric]"
							:label="parameterLabels.numericParam2"
						/>
					</v-col>
					<v-col cols="4" v-if="parameterLabels.aggregation && filters.is_seasonal">
						<v-autocomplete v-if="requestData.product==='Evapotranspiration'"
							:label="parameterLabels.aggregation"
							:items="months"
							item-value='id'
							item-text="name"							
							v-model="requestData.months"
							hint="*Required"
							persistent-hint
							multiple
							clearable
							chips
							deletable-chips							
							:rules="[rules.required]"
						/>

						<v-autocomplete v-if="requestData.product==='Wind Rose'"
							:label="parameterLabels.aggregation"
							:items="dataAggegationList"
							v-model="requestData.aggregation"
							hint="*Required"
							persistent-hint
							:rules="[rules.required]"
						/>									
					</v-col>
					<v-col cols="4" v-if="parameterLabels.aggregation && !filters.is_seasonal">
						<v-autocomplete
							label="Select Months"
							:items="months"
							item-value='id'
							item-text="name"
							v-model="requestData.months"
							hint="*Required"
							persistent-hint
							multiple
							clearable
							chips
							deletable-chips
							:rules="[rules.required, rules.nonEmpty]"
						/>
					</v-col>										
				</v-row>
				<v-row>
					<v-col cols="2">
						<v-autocomplete
							label="Select Start Year"
							:items="availableStartYears"
							v-model="requestData.startYear"
							hint="*Required"
							persistent-hint
							:rules="[rules.required]"
						/>
					</v-col>	
					<v-col cols="2">
						<v-autocomplete
							label="Select End Year"
							:items="availableEndYears"
							v-model="requestData.endYear"
							hint="*Required"
							persistent-hint
								:disabled="!requestData.startYear || ['Wind rose', ].includes(requestData.product)"
							:rules="[rules.required]"

						/>
					</v-col>
					<v-col cols="3" class="d-flex justify-center">
						<v-switch
							v-if="requestData.product && monthlyProducts.includes(requestData.product)"
							v-model="filters.is_seasonal"
							:label='filters.is_seasonal?"Seasonal Summary":"Monthly Summary"'
							inset
					  	/> 						  
					</v-col>
					{% comment %} 					
					<v-col cols="2" v-if="!filters.is_seasonal">
						<v-autocomplete
							label="Select Interval"
							:items="intervals"
							v-model="requestData.interval"
							:rules="[rules.required]"
							hint="*Required"
							persistent-hint
						/>
					</v-col> {% endcomment %}
				</v-row>
				<v-row>
					<v-col cols="3" class="d-flex justify-left">
						<v-row>
							<v-col cols="auto" class="d-flex align-center">
							  <v-switch
								v-model="requestData.validateData"
								:label="requestData.validateData ? 'Validate Data' : 'All Data'"
								inset
							  />
							</v-col>
							<v-col cols="auto" class="d-flex align-center">
							  <v-btn icon @click="showing_info=!showing_info"> <v-icon>mdi-information</v-icon> </v-btn>
							</v-col>
						</v-row>
					</v-col>
					<v-col cols="3" v-if="requestData.validateData && hourlyOnlyProducts.includes(requestData.product)">
						<v-text-field
							v-model="requestData.maxHourPct"
							:rules="[rules.required, rules.numeric, rules.percentage]"
							label="Maximum Hour Percentage"
							hint="*Required"
							persistent-hint
						/>
					</v-col>
					<v-col cols="3" v-if="requestData.validateData">
						<v-text-field
							v-model="requestData.maxDayPct"
							:rules="[rules.required, rules.numeric, rules.percentage]"
							label="Maximum Day Percentage"
							hint="*Required"
							persistent-hint
						/>
					</v-col>					
					<v-col cols="3" v-if="requestData.validateData">
						<v-text-field
							v-model="requestData.maxDayGap"
							:rules="[rules.required, rules.numeric, rules.positive]"
							label="Maximum Day Gap"
							hint="*Required"
							persistent-hint
						/>
					</v-col>
				</v-row>
				<v-row>
					<v-col cols="12">
						<v-alert
							v-if="showing_info"
							type="info"
							text
							:dismissible="true"
							outlined
							@input="showing_info = false"
						>
							Data validation works as follows:
							The first parameter defines the maximum allowable percentage
							of missing data in the hourly summary to compute a valid day.
							The second parameter sets the maximum percentage of missing 
							valid days for a valid aggregation;
							if exceeded, the aggregation returns null for that partition.
							The third parameter specifies the maximum gap between consecutive days;
							if the gap exceeds this limit,
							the aggregation returns null for that partition.
					  	</v-alert>					
					</v-col>
				</v-row>				
				<v-row>				
					<v-col cols="2" class="d-flex justify-left">
						<v-btn @click="getData" :disabled="!isFormValid">
							Request Data
							<v-icon right>send</v-icon>
						</v-btn>
					</v-col>
				</v-row>					
			</v-form>

			
			
			<div>
				<template>
					<v-card v-if="requestedData.responseData && !loading_data">
						
						<v-card-title class="text-center mb-0"> 
							[[ requestedData.product ]]
							<span v-if="requestedData.product==='Heat wave'"> 
								&nbsp;(threshold temperature [[ requestedData.responseContext.threshold ]])
							</span>

						</v-card-title>

						<v-card-text>
							<highcharts v-if="requestedData.product==='Wind rose'" :options="chartOptions"></highcharts>

							<v-tabs v-if="productVariables"  v-model="tab" bg-color="primary" class="justify-center my-5">
								<v-tab v-for="item in productVariables" :key="item"> [[ item ]] </v-tab>
							</v-tabs>
							<template>
								<v-data-table
									:headers="dataTable.headers"
									:items="dataTable.data"
									:items-per-page="-1"
								>
									<template v-for="header in dataTable.colorHeaders" v-slot:[`item.${header.value}`]="{ item }">
											<span :style="{ color: getColor(header, item) }">
												[[ item[header.value] ]]
											</span>
								 	 </template>						  
								</v-data-table>
							</template>
						</v-card-text>
						<v-card-actions>
							<v-btn @click="downloadCSV">
								Download CSV 
								<v-icon right>download</v-icon>
							</v-btn>
						</v-card-actions
					</v-card>
				</template>	
			</div>			
		</v-app>
	</div>
</div>

{% endblock %} {% block localjavascript %}
 
<script>
	Vue.use(window.vuelidate.default);
    Vue.use(HighchartsVue.default);
	const { required, numeric } = window.validators;

	new Vue({
		el: "#app",
		vuetify: new Vuetify(),
		delimiters: ["[[", "]]"],
		data: {
			now: moment().format('YYYY-MM-DD'),
			username: '{{username | safe}}',
			rules: {
				required: value => !!value || 'Required.',
				nonEmpty: value => !!value && value.length>0 || 'Select at least one item.',
				numeric: value => (!isNaN(value) ) || 'Parameter must be a Numeric.',
				integer: value => (Number.isInteger(value) ) || 'Number must be an integer.',
				percentage: value => (0 <= value && value <= 100) || 'Value must be between 0 and 100.',
				positive: value => (0 <= value) || 'Value must greater than 0.',
			},
			tab: null,
			loading_data: false,
			showing_info: false,
			showing_product_info: false,
			isFormValid: false,
			requestData: {
				stationId: null, //59, //4, // 59, // 6, 
                element: 'Air Temperature', // 'Free Water Evaporation / Evapotranspiration', //'Wind', //'Relative Humidity',
				product: null,
				numericParam1: null,
				numericParam2: null,
				aggregation: null,
				startYear: new Date().getFullYear(),// 2000,
				endYear: new Date().getFullYear(), // 2025,
				summaryType: 'Seasonal',
				months: [],
				interavl: null,
				validateData: false,
				maxHourPct: 20,
				maxDayPct: 20,
				maxDayGap: 5,
			},
			requestedData: {
				stationId: null,
                element: null,
				product: null,
				numericParam1: null,
				numericParam2: null,
				aggregation: null,
				startYear: null,
				endYear: null,
				responseData: null,
				responseContext: null,
				responseMinMaxData: null,
				summaryType: 'Seasonal',
				months: [],
				interavl: null,				
				validateData: false,
				maxHourPct: 0,
				maxDayPct: 0,
				maxDayGap: 0,
			},
			filters: {
				is_automatic: false,
				is_seasonal: true
			},
			elements: {
				'Air Temperature': {
					'Growing Degree Days': {
						'info': "The Growing Degree Days (GDD) is calculated based on TEMPMIN and TEMPMAX variables, first its calculated the daily values using the formula ('Temp Min'+ 'Temp Max')/2- 'Base Temp', then the daily values are summed up for each aggregation.",
						'numeric_param_1': {
							value: 30,
							label: 'Base Temperature',
						},
					},
					'Maximum and minimum statistics': {
						'info': 'Minimum and maximum temperatures for each aggregation period.'
					},
					'Number of days above and below specified temperature': {
						'info': 'Number of days, withing the aggregation period, when TEMPMAX exceeded (above) and TEMPMIN fell below (below) a specified threshold temperature.',
						'numeric_param_1': {
							value: 30,
							label: 'Threshold temperature',
						},
					},
					'Growing season statistics': {
						'info': 'Output first and last date when Growing Degree Days (GDD) is above 0 for the specified base temperature.',
						'numeric_param_1': {
							value: 30,
							label: 'Base Temperature',
						},
					},
					'Heat wave': {
						'info': 'Given a percentile, a threshold temperature is calculated using historical TEMPMAX data, then the longest heat wave duration, number of heat wave events and number of hot days are calculated using the threshold temperature and a specified heat wave window.',
						'numeric_param_1': {
							value: 90,
							label: 'Percentile threshold',
						},
						'numeric_param_2': {
							value: 2,
							label: 'Heat wave window (days)',
						},
					},
				},
				'Rainfall': {
					'Number of days with specified rainfall': {
						'info': 'Number of days when daily precipitation (PRECIP) is equal or above a specified ammount in (mm).',
						'numeric_param_1': {
							value: 5,
							label: 'Amount of rainfall',
						},
					},
					'Drought indices': {
						'info': 'Calculation of Standard Precipitation Index (SPI) using precipitaiton (PRECIP) data\
						and Soil Moisture Deficit Index (SMDI) using volumetric water content data at 1 and 4 feet.'
					},
					'Flood and excess rainfall': {
						'info': 'Number of days when daily precipitation (PRECIP) is equal or above a 25, 50, 84, and 200 (mm).'
					},
				},
				'Wind': {
					'Wind rose': {
						'info': 'Graphical representation of wind speed and direction frequency distribution.',
						'aggregation': {
							value: null,
							label: 'Aggregation',
						},
					},
					'Maximum and average wind speed': {
						'info': 'Maximum and average wind speed for each aggregation period.'
					},
					'Diurnal variation of wind speed': {
						'info': 'Diurnal variation of wind speed for each aggregation period.'
					},
					'Number of hours with wind speed below specified value': {
						'info': 'Number of hours when maximum hourly wind speed (WNDSPD) is equal or below a specified value.',
						'numeric_param_1': {
							value: 10,
							label: 'Threshold speed',
						},
					},
				},
				'Radiation and Sunshine':{
					'Sunshine hours': {
						'info': 'Cumulative duration of sunshine hours (SUNSHNHR).'
					},
					'Solar radiation': {
						'info': 'Solar Radiation calculation following FAO-56 standards.\
						For manual stations it uses TEMPMAX and TEMPMIN variables, day of year, and station latitude,\
						the empirical coefficient k_rs is set to 0.16 for inland and 0.19 for coastal stations.\
						For automatic stations it converts solar radiation measurements (SOLARRAD) from  W/m² to MJ/m²,\
						by multiplying measured values by 0.0036.'
					},
					'Net radiation': {
						'info': 'Net Radiation calculation following FAO-56 standards.\
						For manual stations it uses TEMP, RH and SOLARRAD variables, day of year, station latitude and elevation,\
						the empirical coefficient k_rs is set to 0.16 for inland and 0.19 for coastal stations.\
						For automatic stations it uses TEMP, RH and SOLARRAD variables, day of year, station latitude and elevation.'
					},
				},
				'Relative Humidity': {
					'Sequence of days above specified humidity': {
						'info': 'Longest sequence of days that relative humidity (estimated from TEMPMAX and TEMPMIN variables) exceeded a specified threshold.',
						'numeric_param_1': {
							value: 80,
							label: 'Threshold humidity',
						},
					},
					'Sequence of hours above specified humidity': {
						'info': 'Longest sequence of hours that relative humidity exceeded a specified threshold.',
						'numeric_param_1': {
							value: 80,
							label: 'Threshold humidity',
						},
					},					
				},
				'Evaporation and Evapotranspiration': {
					'Accumulative Evaporation': {
						'info': 'Accumulative pan evaporation (EVAPPAN).'
					},
					'Diurnal variation of evaporation':{
						'info': 'Diurnal variation of evaporation for each aggregation period.'
					},
					'Evapotranspiration': {
						'info': 'Evapotranspiration estimates are calculated using the Hargreaves-Samani equation for manual stations, which requires TEMPMAX, TEMPMIN, day of year, station latitude, and FAO-56 default parameters (alpha=0.0023, beta=0.5).\
						For automatic stations, the Hargreaves-Samani equation uses TEMP variable instead of TEMPMAX and TEMPMIN,\
						for those stations the Penman-Monteith equation is also used, which requires TEMP, WNDPSD, SOLARRAD, RH, PRESSTN, along with day of year, station latitude, and elevation.',
						'aggregation': {
							value: null,
							label: 'Months',
						},
					},
				},
				'Soil Temperature':{
					'Mean and standard deviation soil temperature': {
						'info': 'Mean and standard deviation soil temperature at 1 and 4 feets, uses variables TSOIL1 and TSOIL4.'
					},
					'First and Last dates above specified specified temperature': {
						'info': 'Output first and last date when soil temperature reaches specified threshold,\
						the calculation is made for both 1 and 4 feet depths, uses variables TSOIL1 and TSOIL4.',
						'numeric_param_1': {
							value: 30,
							label: 'Threshold temperature',
						},
					},
				},
				'Soil Moisture': {
					'Soil Moisture at regular depths': {
						'info': 'Volumetric water content measurements at 1 and 4 feet depths, uses variables VWCFT1 and VWCFT4.'
					},
					'Leaf area index': {
						'info': 'Leaf Area Index (LAI) calculation based on growing degree days (GDD), from TEMPMAX and TEMPMIN variables, and precipitation values.',
						'numeric_param_1': {
							value: 30,
							label: 'Base Temperature',
						},
					},
				}
			},
			hourlyOnlyProducts: [
				'Diurnal variation of wind speed',
				'Diurnal variation of evaporation',
				'Sequence of hours above specified humidity',
				'Number of hours with wind speed below specified value',
			],			
			parameterLabels: {
				numericParam1: null,
				numericParam2: null,
				aggregation: null,
			},
			start_year_menu: false,
			end_year_menu: false,
			intervals: ['7 days', '10 days', '1 month'],
			monthlyProducts: [
				'Maximum and minimum statistics',
				'Heat wave',
				'Sequence of days above specified humidity',
				'Sequence of hours above specified humidity',
				'Number of days with specified rainfall',
				'Flood and excess rainfall',
				'Wind rose',
			],
			months: [
				{id: 1, name: 'Jan'},
				{id: 2, name: 'Feb'},
				{id: 3, name: 'Mar'},
				{id: 4, name: 'Apr'},
				{id: 5, name: 'May'},
				{id: 6, name: 'Jun'},
				{id: 7, name: 'Jul'},
				{id: 8, name: 'Aug'},
				{id: 9, name: 'Sep'},
				{id: 10, name: 'Oct'},
				{id: 11, name: 'Nov'},
				{id: 12, name: 'Dec'},
			],
			stationList: [
				{% for station in station_list %}
					{
						id: {{station.id}},
						base_name: "{{station.name | safe }}",
						name: "{{station.name | safe }} - {{station.code}}",
						code: "{{station.code}}",
						is_automatic:  {{station.is_automatic|yesno:"true,false"}},
						latitude: {{station.latitude}},
						longitude: {{station.longitude}}
					},
				{% endfor %}
			]
		},
		watch: {
			'requestData.startYear' (newStartYear, oldStartYear) {
				if (['Wind rose',].includes(this.requestData.product)){
					this.requestData.endYear = this.requestData.startYear
				}
				else{
					this.requestData.endYear = null
				}
			},
			'requestData.stationId' (newStationId, oldStationId) {
				if (this.isHourlyStation){
					this.requestData.product = null
				}
			},				
			'filters.is_automatic' (newValue, oldValue) {
				this.requestData.stationId = null
			},
			'filters.is_seasonal' (newValue, oldValue) {
				this.requestData.summaryType = newValue?'Seasonal':'Monthly'
			},
			'requestData.element' (newElement, oldElement){
				this.requestData.product = null
				this.filters.is_seasonal = true
			},
			'requestData.product' (newProduct, oldProduct){
				const { element, product, ...rest } = this.requestData;
				this.filters.is_seasonal = true
				
				if (this.requestData.product) {
					this.requestData.numericParam1 = this.elements[element][product].numeric_param_1?.value || null
					this.requestData.numericParam2 = this.elements[element][product].numeric_param_2?.value || null
					this.requestData.aggregation = this.elements[element][product].aggregation?.value || null

					this.parameterLabels.numericParam1 = this.elements[element][product].numeric_param_1?.label || null
					this.parameterLabels.numericParam2 = this.elements[element][product].numeric_param_2?.label || null
					this.parameterLabels.aggregation = this.elements[element][product].aggregation?.label || null

					if (['Wind rose', ].includes(this.requestData.product)){
						this.requestData.endYear = this.requestData.startYear
					}

				}
				else {
					this.requestData.numericParam1 = null
					this.requestData.numericParam2 = null
					this.parameterLabels.numericParam1 = null
					this.parameterLabels.numericParam2 = null
				}
			},
			'requestData.summaryType' (newSummaryType, oldSummaryType){
				this.requestData.months = []
			},
		},	
		computed: {
			windRoseData() {
				if (this.requestedData.product != 'Wind rose') return null;
				if (!this.dataTable.data || !this.dataTable.data.length) return null;
			
				const speedBins = [
					{ name: '0-5 kt', color: '#A6D96A', min: 0, max: 5 },      // Light Green
					{ name: '5-10 kt', color: '#66BD63', min: 5, max: 10 },    // Medium Green
					{ name: '10-15 kt', color: '#1A9850', min: 10, max: 15 },  // Dark Green
					{ name: '15-20 kt', color: '#4575B4', min: 15, max: 20 },  // Light Blue
					{ name: '20-25 kt', color: '#313695', min: 20, max: 25 },  // Dark Blue
					{ name: '25+ kt', color: '#762A83', min: 25, max: Infinity } // Purple (for highest winds)
				];
			
				const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
			
				// Initialize data structure for each speed bin
				const seriesData = speedBins.map(speedBin => {
					const filteredData =  this.dataTable.data.filter(entry => entry['Wind Speed']===speedBin.name)
					const frequencyData = directions.map(dir => filteredData
						.find(entry => entry['Wind Direction'] === dir)['Frequency']
					);					
			
					return {
						name: speedBin.name,
						color: speedBin.color,
						data: frequencyData
					};
				});

				return seriesData;
			},		
			chartOptions() {
                const categories = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
                return Object.assign({}, {
                    chart: {
                        polar: true,
                        type: 'column'
                    },
                    title: {
                        text: 'Wind rose'
                    },
                    pane: {
                        size: '85%'
                    },
                    legend: {
                        align: 'right',
                        verticalAlign: 'top',
                        y: 100,
                        layout: 'vertical'
                    },
                    xAxis: {
                        categories: categories,
                        tickmarkPlacement: 'on',
                        lineWidth: 0
                    },
                    yAxis: {
                        min: 0,
                        endOnTick: false,
                        showLastLabel: true,
                        title: {
                            text: 'Frequency (%)'
                        },
                        labels: {
                            formatter: function () {
                                return this.value + '%';
                            }
                        },
                        reversedStacks: false
                    },
                    tooltip: {
                        valueSuffix: '%',
                        valueDecimals: 2
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal',
                            shadow: false,
                            groupPadding: 0,
                            pointPlacement: 'on'
                        }
                    },
                    series: this.windRoseData
                });
			},
			availableStartYears () {
				const min_year = 1900
				const max_year = moment().year()
				return Array.from({ length: max_year - min_year + 1 }, (_, i) => max_year - i);
			},
			availableEndYears () {
				if (!this.requestData.startYear) return [];
				const min_year = this.requestData.startYear
				const max_year = moment().year()
				return Array.from({ length: max_year - min_year + 1 }, (_, i) => max_year - i);
			},			
			filteredStationList() {
				return this.stationList.filter(station=>station.is_automatic===this.filters.is_automatic)
			},
			selectedVariableSymbol() {
				return this.productVariables?  this.productVariables[this.tab]:null
				// return this.productVariables.length === 1
				// 	?this.productVariables[0]
				// 	:this.productVariables[this.tab]
			},
			dataTable () {
				const {product, ...rest} = this.requestedData

				const multivariableProducts = [
					'Degree days',
					'Maximum and minimum statistics',
					'Days above or below selected temperature',
					'Heat wave',
					'Number of days with specified rainfall',
					'Sequence of days above specified humidity',
					'Wind rose',
					'Flood and excess rainfall',
				]

				let filteredData = this.requestedData.responseData
				if (product===null) return {headers:[], data:[]}

				// const selectedVariableSymbol = this.productVariables[this.tab]

				filteredData = filteredData
					.filter(entry => entry.product === this.selectedVariableSymbol)
					.map(({ product, ...rest }) => rest);

				let baseKeys = []
				let baseHeaders = []

				if (this.requestedData.summaryType==='Seasonal'){
					if(['Wind rose'].includes(product)) {
						baseKeys = ['station']
						baseHeaders = [];
					}
					else {
						baseKeys = ['station', 'year']
						baseHeaders = [
							{ text: 'Year', align: 'end', value: 'year', sortable: false}
						];
					}
					
				}
				else if (this.requestedData.summaryType==='Monthly'){
					if(product === 'Wind rose') {
						baseKeys = ['station']
						baseHeaders = [];
					}
					else if (this.monthlyProducts.includes(product)) {
						baseKeys = ['station', 'year']
						baseHeaders = [
							{ text: 'Year', align: 'end', value: 'year', sortable: false}
						];
					}
					else {
						baseKeys = ['station', 'year', 'month']
						baseHeaders = [
							{ text: 'Year', align: 'end', value: 'year', sortable: false},
							{ text: 'Month', align: 'end', value: 'month', sortable: false}
						];
					}
				}

				const keys = filteredData.length? Object.keys(filteredData[0]).filter(item => !baseKeys.includes(item)): [];
				const calcHeaders = keys.map(item => ({text: item, align: 'end', value: item, sortable: false}));

				const colorHeaders = calcHeaders.filter(item => !item.value.endsWith('(% of days)'));
				
				return { headers: [...baseHeaders, ...calcHeaders], data: filteredData, colorHeaders: colorHeaders};		
			},
			dataAggegationList () {
				{% comment %} return ['1-month', '3-month', '6-month', '12-month', '24-month'] {% endcomment %}
				return [
					"JFM", "FMA", "MAM", "AMJ",
					"MJJ", "JJA", "JAS", "ASO",
					"SON", "OND", "NDJ", "DRY",
					"WET", "ANNUAL", "DJFM"
				]
			},		  
			filteredMinMaxData () {
				const selectedVariableId = this.productVariables[this.tab];
				const station = this.stationList.find(station => station.id === this.requestedData.stationId)
				if (Object.keys(this.requestedData.responseMinMaxData[station.base_name]).length === 0) return {}
				return this.requestedData.responseMinMaxData[station.base_name][selectedVariableId]
			},	
			productVariables (){
				if (!this.requestedData.responseData) return null
				const variables = this.requestedData.responseData.map(({ product }) => product);

				if (this.requestedData.product === 'Global and Net Radiation') {
					const productOrder = ['Solar Radiation', 'Global Radiation', 'Net Shortwave Radiation', 'Net Longwave Radiation', 'Net Radiation'];
					return variables.some(value => value !== undefined)? [...new Set(variables)].sort((a, b) => productOrder.indexOf(a) - productOrder.indexOf(b)): null
				}
				return variables.some(value => value !== undefined)? [...new Set(variables)].sort(): null
			},
			filteredElements() {
				if (this.isHourlyStation) {
				  return this.elements;
				}
			  
				return Object.fromEntries(
				  Object.entries(this.elements).map(([elementName, products]) => [
					elementName,
					Object.fromEntries(
					  Object.entries(products).filter(
						([productName]) => !this.hourlyOnlyProducts.includes(productName)
					  )
					)
				  ])
				);
			},
			isHourlyStation (){
				const station = this.stationList.find(station => station.id === this.requestData.stationId)
				const pgiaCode = '8858307'
				
				if (!station) return false
				return station.is_automatic || station.code === pgiaCode
			},
		},
		methods: {
            getData(){
				this.loading_data = true

				this.requestedData = JSON.parse(JSON.stringify(this.requestData));

				this.requestedData.responseData = null
				this.requestedData.responseMinMaxData = null
				this.requestedData.responseContext = null
				this.requestedData.requestedAt = moment().format('YYYY-MM-DD HH:mm')

				const url = `/wx/agromet/products/get/`

				const params = {
					station_id: this.requestedData.stationId,
					element: this.requestedData.element,
					product: this.requestedData.product,
					numeric_param_1: this.requestedData.numericParam1,
					numeric_param_2: this.requestedData.numericParam2,
					aggregation: this.requestedData.aggregation,
					start_year: this.requestedData.startYear,
					end_year: this.requestedData.endYear,
					summary_type: this.requestedData.summaryType,
					months: this.requestedData.months.join(','),
					interval: this.requestedData.interval,
					validate_data: this.requestedData.validateData,
					max_hour_pct: this.requestedData.maxHourPct,
					max_day_pct: this.requestedData.maxDayPct,
					max_day_gap: this.requestedData.maxDayGap
				};
				
				console.log('Requesting data with params:', params);
        		axios.get(url, { params })
				.then(response => {
					this.requestedData.responseData = response.data.tableData;
					this.requestedData.responseContext = response.data.context;
					this.requestedData.responseMinMaxData = response.data.minMaxData;
				})
				.catch(error => {
					console.error('Error fetching data:', error);
				})
				.finally(() => {
					this.loading_data = false
				});

			},
			convertToCSV(data) {
				const { stationId, element, product, summaryType, startYear, endYear, interval, requestedAt, months, ...rest } = this.requestedData;
				
				const station = this.stationList.find(station => station.id === stationId)

				const metadataList = [
					`Description: Agromet ${summaryType} Summary\n`,
					`Station Name: ${station?.name}\n`,
					`Element: ${element}\n`,
					`Product: ${product}\n`,
					`Variable: ${this.selectedVariableSymbol}\n`,
					`${summaryType === 'Monthly' ? `Interval: ${interval}\nMonths: ${months}\n` : ''}`,
					`Start/End Year: ${startYear}/${endYear}\n`,
					`Station Lat/Lon: ${station?.latitude}/${station?.longitude}\n`,
					`Request Datetime: ${requestedAt}\n`,
					`UserName: ${this.username}`
				]

				const metadata = `"`+metadataList.join('')+`"\n\n`
			  
				const headers = data.headers.map(item => item.text).join(',') + '\n';

				const indicesToRemove = [0] // Exclude the StationID column
				const rows = data.data.map(row => 
				  Object.values(row)
					.filter((value, index) => !indicesToRemove.includes(index)) 
					.map(value => `"${value}"`)
					.join(',')
				).join('\n');

				return metadata + headers + rows;
			},
			downloadCSV() {
				const csvContent = this.convertToCSV(this.dataTable);
				const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
				const link = document.createElement('a');

				const { stationId, element, product, summaryType, startYear, endYear, interval, ...rest } = this.requestedData;

				const station = this.stationList.find(station => station.id === stationId)
						
				const filename = summaryType === 'Monthly' 
  					? `agromet-products-(${summaryType})-${station?.name}-${element}-${product}-${startYear}-${endYear}-[${interval}].csv`
  					: `agromet-products-(${summaryType})-${station?.name}-${element}-${product}-${startYear}-${endYear}.csv`;
			
				link.href = URL.createObjectURL(blob);
				link.download = filename;
				link.style.visibility = 'hidden';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			getColor (header, item) {
				// const station = this.stationList.find(station => station.id === this.requestedData.stationId)
				// let filteredMinMaxData = this.requestedData.responseMinMaxData[station.base_name]

				if (Object.keys(this.filteredMinMaxData).length === 0) return 'black'

				let item_entry = (this.requestedData.summaryType === 'Monthly')? {month: item.month, year: item.year} : {year: item.year}

				const is_min = this.filteredMinMaxData[header.value].min.some(item => JSON.stringify(item) === JSON.stringify(item_entry));
				const is_max = this.filteredMinMaxData[header.value].max.some(item => JSON.stringify(item) === JSON.stringify(item_entry));

				if (is_min && is_max) return 'black'
				else if (is_min) return 'blue'
				else if (is_max) return 'red'
				return 'black'
			},
		},
	})

	$(document).ready(function(){
		function getCookie(c_name) {
			if(document.cookie.length > 0) {
				c_start = document.cookie.indexOf(c_name + "=");
				if(c_start != -1) {
					c_start = c_start + c_name.length + 1;
					c_end = document.cookie.indexOf(";", c_start);
					if(c_end == -1) c_end = document.cookie.length;
					return unescape(document.cookie.substring(c_start,c_end));
				}
			}
			return "";
		}
	
		$(function () {
		  axios.defaults.headers.common["X-CSRFToken"] = getCookie("csrftoken");
		  axios.defaults.headers.common["Content-Type"] = 'application/json';
		});
	});	
</script>
{% endblock %}