/*
License:

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import { h } from 'preact'
import style from './style.less'

import { monthNames } from '../../lib/constants'

export default ({ show, month, year, isFullYear, toggleFullYear, gotoMonth }) => {
  return <div class={show ? style.Show : style.Menu}>
    <select
      title='Gehe zum Monat'
      value={month}
      onChange={event => {
        gotoMonth({ month: +event.target.value }, true)
      }}
    >
      {monthNames.map((name, index) => <option key={name} value={index}>{name}</option>)}
    </select>

    <label>
      Jahr
      <input
        type='number'
        min='2000'
        value={year}
        onChange={event => {
          const year = +event.target.value

          if (Number.isNaN(year)) return

          gotoMonth({ year }, false)
        }}
      />
    </label>

    <button onClick={toggleFullYear}>
      Zeige {isFullYear ? 'Monate' : 'ganzes Jahr'}
    </button>
  </div>
}

@@ -314,16 +314,248 @@
 tants'%0A%0A
+const supportsMonthInput = (() =%3E %7B%0A  const parent = document.createElement('div')%0A  const input = document.createElement('input')%0A  input.type = 'month'%0A  parent.appendChild(input)%0A  return parent.firstChild.type === 'month'%0A%7D)()%0A%0A
 export d
@@ -686,16 +686,57 @@
 nu%7D%3E%0A   
+ %7BsupportsMonthInput%0A      ? null%0A      :
  %3Cselect
@@ -742,16 +742,18 @@
 t%0A      
+ 
+ 
 title='G
@@ -767,16 +767,18 @@
  Monat'%0A
+  
       va
@@ -791,24 +791,26 @@
 onth%7D%0A      
+  
 onChange=%7Bev
@@ -818,32 +818,34 @@
 nt =%3E %7B%0A        
+ 
+ 
 gotoMonth(%7B mont
@@ -886,23 +886,27 @@
     
+  
 %7D%7D%0A    
+  
 %3E%0A      
 %7Bmon
@@ -901,16 +901,18 @@
 %3E%0A      
+ 
+ 
 %7BmonthNa
@@ -991,16 +991,18 @@
 %3E)%7D%0A    
+  
 %3C/select
@@ -1003,20 +1003,67 @@
 select%3E%0A
-%0A
    
+ %7D%0A%0A    %7BsupportsMonthInput%0A      ? null%0A      :
  %3Clabel%3E
@@ -1073,13 +1073,17 @@
     
+  
 Jahr%0A
+  
     
@@ -1087,24 +1087,26 @@
      %3Cinput%0A
+  
         type
@@ -1123,16 +1123,18 @@
         
+  
 min='200
@@ -1136,16 +1136,18 @@
 ='2000'%0A
+  
         
@@ -1159,16 +1159,18 @@
 =%7Byear%7D%0A
+  
         
@@ -1200,16 +1200,18 @@
         
+  
 const ye
@@ -1236,16 +1236,18 @@
 .value%0A%0A
+  
         
@@ -1282,32 +1282,34 @@
 turn%0A%0A          
+  
 gotoMonth(%7B year
@@ -1323,27 +1323,31 @@
 se)%0A        
+ 
+ 
 %7D%7D%0A
+  
       /%3E%0A   
@@ -1351,16 +1351,18 @@
     
+  
 %3C/label%3E
 %0A%0A  
@@ -1357,16 +1357,450 @@
 %3C/label%3E
+%0A    %7D%0A%0A    %7BsupportsMonthInput%0A      ? %3Clabel%3E%0A        Gehe zum Monat%0A        %3Cinput%0A          type='month'%0A          min='2000-01'%0A          value=%7B%60$%7Byear%7D-$%7BString(month + 1).padStart(2, '0')%7D%60%7D%0A          onChange=%7Bevent =%3E %7B%0A            const %5Byear, month%5D = event.target.value.split('-').map(s =%3E parseInt(s, 10))%0A            gotoMonth(%7B year, month: month - 1 %7D, false)%0A          %7D%7D%0A        /%3E%0A      %3C/label%3E%0A      : null%0A    %7D
 %0A%0A    %3Cb

add month input