import React from 'react'

import { useTheme } from '../../themes/useTheme'
import { useAwaitRender, useUpdateTranslations } from '../../core/hooks'

import { FilterBarTypes } from './FilterBarTypes'
import { FilterPanels, FilterControls, FilterTabs } from './components'
import { FilterBarProvider } from './providers'

import '../../themes/Default.css'
import './FilterBar.css'

export const FilterBar = ({
  language,
  ageCategories,
  redirectUrl = REDIRECT_URL_FALLBACK,
  palette,
  onSubmit,
  fullWidth,
  disableCalendarDates,
  mode,
  tabs,
  outerLoading,
  locations,
}: FilterBarTypes) => {
  const themePalette = useTheme({ palette })

  // Translations
  useUpdateTranslations({ language })

  // Display component after fully loaded
  useAwaitRender()

  return (
    <FilterBarProvider
      language={language}
      ageCategories={ageCategories}
      redirectUrl={redirectUrl}
      palette={palette}
      onSubmit={onSubmit}
      fullWidth={fullWidth}
      disableCalendarDates={disableCalendarDates}
      mode={mode}
      tabs={tabs}
      outerLoading={outerLoading}
      locations={locations}
    >
      <div
        className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
        style={themePalette}
      >
        <FilterTabs />

        <FilterControls />

        <FilterPanels />
      </div>
    </FilterBarProvider>
  )
}

////////////

const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'