/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import { useRef, useCallback, useMemo, useEffect } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
import { _x } from '@wordpress/i18n';

const CalendarWrapper = styled.div`
  min-height: 236px;
`;

function DatePicker({ currentDate, onChange, onViewChange }) {
  const nodeRef = useRef();
  const value = useMemo(() => new Date(currentDate), [currentDate]);
  const handleOnChange = useCallback(
    (newDate) => {
      newDate.setHours(value.getHours());
      newDate.setMinutes(value.getMinutes());
      onChange(newDate.toISOString(), /* Close calendar */ true);
    },
    [value, onChange]
  );

  useEffect(() => {
    // Set tabIndex to -1 for every except for the first button.
    if (nodeRef.current) {
      // Allow tabbing to sections inside the calendar.
      const navButtons = [
        ...nodeRef.current.querySelectorAll(
          '.react-calendar__navigation button'
        ),
      ];
      navButtons.shift();
      for (const btn of navButtons) {
        btn.tabIndex = '-1';
      }
      const buttons = [
        ...nodeRef.current.querySelectorAll(
          '.react-calendar__viewContainer button'
        ),
      ];
      buttons.shift();
      for (const btn of buttons) {
        btn.tabIndex = '-1';
      }
    }
  }, [nodeRef]);

  return (
    <CalendarWrapper ref={nodeRef}>
      <Calendar
        value={value}
        onChange={handleOnChange}
        onViewChange={onViewChange}
        nextAriaLabel={_x(
          'Next',
          'This label can apply to next month, year and/or decade',
          'web-stories'
        )}
        prevAriaLabel={_x(
          'Previous',
          'This label can apply to previous month, year and/or decade',
          'web-stories'
        )}
        next2AriaLabel={_x(
          'Jump forward',
          'This label can apply to month, year and/or decade',
          'web-stories'
        )}
        prev2AriaLabel={_x(
          'Jump backwards',
          'This label can apply to month, year and/or decade',
          'web-stories'
        )}
      />
    </CalendarWrapper>
  );
}

DatePicker.propTypes = {
  onChange: PropTypes.func.isRequired,
  onViewChange: PropTypes.func,
  currentDate: PropTypes.string,
};

export default DatePicker;

@@ -1392,26 +1392,76 @@
 %0A%0A  
-useEffect((
+const updateTabIndexes = useCallback(%0A    (setFocus = false
 ) =%3E %7B%0A
+  
     
@@ -1525,16 +1525,18 @@
 on.%0A    
+  
 if (node
@@ -1546,24 +1546,26 @@
 .current) %7B%0A
+  
       // All
@@ -1610,24 +1610,26 @@
 ndar.%0A      
+  
 const navBut
@@ -1629,32 +1629,34 @@
  navButtons = %5B%0A
+  
         ...nodeR
@@ -1686,32 +1686,34 @@
 rAll(%0A          
+  
 '.react-calendar
@@ -1725,32 +1725,34 @@
 igation button'%0A
+  
         ),%0A     
@@ -1748,27 +1748,69 @@
    ),%0A      
+  
 %5D;%0A
+        navButtons%5B0%5D.tabIndex = '0';%0A  
       navBut
@@ -1815,32 +1815,34 @@
 uttons.shift();%0A
+  
       for (const
@@ -1863,32 +1863,34 @@
 tons) %7B%0A        
+  
 btn.tabIndex = '
@@ -1890,32 +1890,34 @@
 dex = '-1';%0A
+  
       %7D%0A
       const 
@@ -1900,24 +1900,52 @@
 ;%0A        %7D%0A
+%0A        // Dates / days.%0A  
       const 
@@ -1948,32 +1948,34 @@
 nst buttons = %5B%0A
+  
         ...nodeR
@@ -2005,32 +2005,34 @@
 rAll(%0A          
+ 
+ 
 '.react-calendar
@@ -2059,27 +2059,31 @@
 on'%0A        
+  
 ),%0A
+  
       %5D;%0A   
@@ -2089,25 +2089,288 @@
     
-buttons.shift();%0A
+  // Allow tabbing to first.%0A        buttons%5B0%5D.tabIndex = '0';%0A        if (setFocus) %7B%0A          // When changing view we need to explicitly set focus again,%0A          // It seems to not be happening by default.%0A          buttons%5B0%5D.focus();%0A        %7D%0A        buttons.shift();%0A  
     
@@ -2400,32 +2400,34 @@
 tons) %7B%0A        
+  
 btn.tabIndex = '
@@ -2441,20 +2441,30 @@
     
+  
 %7D%0A    
+ 
+ 
 %7D%0A
+  
   %7D,
+%0A   
  %5Bno
@@ -2469,16 +2469,90 @@
 nodeRef%5D
+%0A  );%0A%0A  useEffect(() =%3E %7B%0A    updateTabIndexes();%0A  %7D, %5BupdateTabIndexes%5D
 );%0A%0A  re
@@ -2694,32 +2694,111 @@
 =%7BonViewChange%7D%0A
+        onActiveStartDateChange=%7B() =%3E updateTabIndexes(true /* Set focus */)%7D%0A
         nextAria

Refactor setting tabindexes a bit.