import React from 'react'
import { useTranslation } from 'react-i18next'

import { useTheme } from '../../themes/useTheme'
import { Calendar, CloseButton } from '../../core/components'
import {
  useAwaitRender,
  useCloseFilterSection,
  useUpdateTranslations,
} from '../../core/hooks'

import { FilterCalendarTypes } from './FilterCalendarTypes'
import { useFilterCalendar } from './hooks/useFilterCalendar'
import { Footer } from './components/Footer'

import '../../themes/Default.css'
import './FilterCalendar.css'

export default function FilterCalendar({
  calendarOffset,
  language,
  palette,
  onSubmit,
  disableCalendarDates: outerDisableCalendarDates,
  toggleCalendar,
  loadingData,
  setToggleCalendar,
  requestDates,
  showFeedback,
  noActiveSelection,
  rangeContext: outerRangeContext,
}: FilterCalendarTypes) {
  const themePalette = useTheme({ palette })

  // Translations
  useUpdateTranslations({ language })
  const { t } = useTranslation()

  const {
    setCalendarRange,
    handleClearDates,
    calendarRange,
    disabledDates,
    updateCalendarMonthNavigation,
    updateCalendarDefaultMonth,
    setUpdateCalendarMonthNavigation,
    calendarHasError,
    setCalendarHasError,
    setUpdatedForSubmit,
    rangeContext,
    disableCalendarDates,
  } = useFilterCalendar({
    onSubmit,
    setToggleCalendar,
    noActiveSelection,
    toggleCalendar,
    outerRangeContext,
    outerDisableCalendarDates,
  })

  // Display component after fully loaded
  useAwaitRender()

  // Handle close filter section
  const { filterSectionRef } = useCloseFilterSection({
    handleSelectedFilter: setToggleCalendar,
  })

  return (
    <div className={`will-root`} style={themePalette}>
      {toggleCalendar && (
        <div className={`will-calendar-wrapper`} ref={filterSectionRef}>
          <div className={`will-calendar-header`}>
            <h2>{t('filterBar:calendar.title')}</h2>
            <CloseButton handleClose={() => setToggleCalendar(false)} />
          </div>
          <div className={`will-calendar-main`}>
            <Calendar
              calendarRange={calendarRange}
              setCalendarRange={setCalendarRange}
              calendarOffset={calendarOffset}
              selectedPath={'/rooms'}
              language={language}
              disableCalendarDates={disableCalendarDates}
              requestDates={requestDates}
              disabledDates={disabledDates}
              updateCalendarMonthNavigation={updateCalendarMonthNavigation}
              setUpdateCalendarMonthNavigation={
                setUpdateCalendarMonthNavigation
              }
              updateCalendarDefaultMonth={updateCalendarDefaultMonth}
              loadingData={loadingData}
              showFeedback={showFeedback}
              noActiveSelection={noActiveSelection}
              palette={palette}
              setCalendarHasError={setCalendarHasError}
              setUpdatedForSubmit={setUpdatedForSubmit}
              rangeContext={rangeContext}
              calendarHasError={calendarHasError}
            />
          </div>
          <div className="will-calendar-footer">
            <Footer
              calendarHasError={calendarHasError}
              calendarRange={calendarRange}
              handleClearDates={handleClearDates}
              language={language}
              palette={palette}
            />
          </div>
        </div>
      )}
    </div>
  )
}