text: /*
   * Backpack - Skyscanner's Design System
   *
   * Copyright 2016-2021 Skyscanner Ltd
   *
   * 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
   *
   *   http://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.
   */
  
  import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import startOfMonth from 'date-fns/start_of_month';
  import endOfMonth from 'date-fns/end_of_month';
  import { action } from 'bpk-storybook-utils';
  import { DateUtils } from 'bpk-component-calendar';
  
  import {
    formatDateFull,
    formatDateFullArabic,
    formatDateFullJapanese,
    formatMonth,
    formatMonthArabic,
    formatMonthJapanese,
    weekDays,
    weekDaysMoreWeekend,
    weekDaysArabic,
    weekDaysJapanese,
  } from './test-utils';
  
  import BpkScrollableCalendar, {
    BpkScrollableCalendarDate,
    BpkScrollableCalendarGrid,
    BpkScrollableCalendarGridList,
  } from './index';
  
  export default class ScrollableCal extends Component {
    constructor(props) {
      super(props);
  
      const selectedDate = this.props.selectTodaysDate ? new Date() : null;
  
      this.state = {
        selectedDate,
      };
    }
  
    handleDateSelect = date => {
      this.setState({
        selectedDate: date,
      });
    };
  
    render() {
      return (
        <BpkScrollableCalendar
          id="calendar"
          {...this.props}
          onDateSelect={selectedDate => {
            this.setState({ selectedDate });
            action('Selected day')(selectedDate);
          }}
          date={this.state.selectedDate}
        />
      );
    }
  }
  ScrollableCal.propTypes = {
    selectTodaysDate: PropTypes.bool,
  };
  
  ScrollableCal.defaultProps = {
    selectTodaysDate: true,
  };
  
  const DefaultExample = () => (
    <ScrollableCal
      weekStartsOn={1}
      daysOfWeek={weekDays}
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      DateComponent={BpkScrollableCalendarDate}
      showWeekendSeparator
      selectTodaysDate
      // Subtract one day from today's date to make today selectable by default
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const WeekStartsOnSeven = () => (
    <ScrollableCal
      weekStartsOn={7}
      daysOfWeek={weekDays}
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      DateComponent={BpkScrollableCalendarDate}
      showWeekendSeparator
      selectTodaysDate
      // Subtract one day from today's date to make today selectable by default
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const WithFocusedDate = () => (
    <ScrollableCal
      weekStartsOn={1}
      daysOfWeek={weekDays}
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      DateComponent={BpkScrollableCalendarDate}
      showWeekendSeparator
      selectTodaysDate
      // Subtract one day from today's date to make today selectable by default
      minDate={DateUtils.addDays(new Date(), -1)}
      focusedDate={DateUtils.addMonths(new Date(), 11)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const TallContainer = () => (
    <div style={{ height: '500px', display: 'flex' }}>
      <ScrollableCal
        weekStartsOn={1}
        daysOfWeek={weekDays}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        DateComponent={BpkScrollableCalendarDate}
        showWeekendSeparator
        selectTodaysDate
        // Subtract one day from today's date to make today selectable by default
        minDate={DateUtils.addDays(new Date(), -1)}
        maxDate={DateUtils.addMonths(new Date(), 12)}
      />
    </div>
  );
  
  const SingleMonth = () => (
    <div style={{ height: '500px', display: 'flex' }}>
      <ScrollableCal
        weekStartsOn={1}
        daysOfWeek={weekDays}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        DateComponent={BpkScrollableCalendarDate}
        showWeekendSeparator
        selectTodaysDate
        // Subtract one day from today's date to make today selectable by default
        minDate={startOfMonth(new Date())}
        maxDate={endOfMonth(new Date())}
      />
    </div>
  );
  
  const ScrollableCalendarDate = () => (
    <BpkScrollableCalendarDate
      date={new Date()}
      onDateClick={action('Clicked day')}
    />
  );
  
  const ScrollableCalendarGrid = () => (
    <BpkScrollableCalendarGrid
      month={new Date(2019, 1, 0)}
      weekStartsOn={1}
      daysOfWeek={weekDays}
      onDateClick={action('Clicked day')}
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      DateComponent={BpkScrollableCalendarDate}
      showWeekendSeparator
    />
  );
  
  const ScrollableCalendarGridList = () => (
    <BpkScrollableCalendarGridList
      month={new Date()}
      weekStartsOn={1}
      daysOfWeek={weekDays}
      onDateClick={action('Clicked day')}
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      DateComponent={BpkScrollableCalendarDate}
      showWeekendSeparator
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const NoWeekendSeparator = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      daysOfWeek={weekDays}
      weekStartsOn={1}
      showWeekendSeparator={false}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const WeekStartsOnSunday = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      daysOfWeek={weekDays}
      weekStartsOn={0}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const HonestWeekend = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      daysOfWeek={weekDaysMoreWeekend}
      weekStartsOn={1}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const ArabicLocale = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonthArabic}
      formatDateFull={formatDateFullArabic}
      daysOfWeek={weekDaysArabic}
      weekStartsOn={6}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const JapaneseLocale = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonthJapanese}
      formatDateFull={formatDateFullJapanese}
      daysOfWeek={weekDaysJapanese}
      weekStartsOn={0}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  const DifferentMinMaxDates = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      daysOfWeek={weekDays}
      weekStartsOn={1}
      selectTodaysDate
      minDate={new Date(2020, 4, 15)}
      maxDate={new Date(2020, 5, 15)}
    />
  );
  
  const DontMarkToday = () => (
    <ScrollableCal
      id="myCalendar"
      formatMonth={formatMonth}
      formatDateFull={formatDateFull}
      daysOfWeek={weekDays}
      weekStartsOn={1}
      markToday={false}
      selectTodaysDate
      minDate={DateUtils.addDays(new Date(), -1)}
      maxDate={DateUtils.addMonths(new Date(), 12)}
    />
  );
  
  export {
    DefaultExample,
    WeekStartsOnSeven,
    WithFocusedDate,
    TallContainer,
    SingleMonth,
    NoWeekendSeparator,
    WeekStartsOnSunday,
    HonestWeekend,
    ArabicLocale,
    JapaneseLocale,
    DifferentMinMaxDates,
    DontMarkToday,
    ScrollableCalendarDate,
    ScrollableCalendarGrid,
    ScrollableCalendarGridList,
  };
  