import React from 'react'
import { useTranslation } from 'next-i18next'
import classNames from 'classnames'

import RaidDropdown from '~components/RaidDropdown'

import './index.scss'

interface Props {
  children: React.ReactNode
  scrolled: boolean
  element?: number
  raidSlug?: string
  recency?: number
  onFilter: ({
    element,
    raidSlug,
    recency,
  }: {
    element?: number
    raidSlug?: string
    recency?: number
  }) => void
}

const FilterBar = (props: Props) => {
  // Set up translation
  const { t } = useTranslation('common')

  // Set up refs for filter dropdowns
  const elementSelect = React.createRef<HTMLSelectElement>()
  const raidSelect = React.createRef<HTMLSelectElement>()
  const recencySelect = React.createRef<HTMLSelectElement>()

  // Set up classes object for showing shadow on scroll
  const classes = classNames({
    FilterBar: true,
    shadow: props.scrolled,
  })

  function elementSelectChanged() {
    const elementValue = elementSelect.current
      ? parseInt(elementSelect.current.value)
      : -1
    props.onFilter({ element: elementValue })
  }

  function recencySelectChanged() {
    const recencyValue = recencySelect.current
      ? parseInt(recencySelect.current.value)
      : -1
    props.onFilter({ recency: recencyValue })
  }

  function raidSelectChanged(slug?: string) {
    props.onFilter({ raidSlug: slug })
  }

  return (
    <div className={classes}>
      {props.children}
      <select
        onChange={elementSelectChanged}
        ref={elementSelect}
        value={props.element}
      >
        <option data-element="all" key={-1} value={-1}>
          {t('elements.full.all')}
        </option>
        <option data-element="null" key={0} value={0}>
          {t('elements.full.null')}
        </option>
        <option data-element="wind" key={1} value={1}>
          {t('elements.full.wind')}
        </option>
        <option data-element="fire" key={2} value={2}>
          {t('elements.full.fire')}
        </option>
        <option data-element="water" key={3} value={3}>
          {t('elements.full.water')}
        </option>
        <option data-element="earth" key={4} value={4}>
          {t('elements.full.earth')}
        </option>
        <option data-element="dark" key={5} value={5}>
          {t('elements.full.dark')}
        </option>
        <option data-element="light" key={6} value={6}>
          {t('elements.full.light')}
        </option>
      </select>
      <RaidDropdown
        currentRaid={props.raidSlug}
        showAllRaidsOption={true}
        onChange={raidSelectChanged}
        ref={raidSelect}
      />
      <select onChange={recencySelectChanged} ref={recencySelect}>
        <option key={-1} value={-1}>
          {t('recency.all_time')}
        </option>
        <option key={86400} value={86400}>
          {t('recency.last_day')}
        </option>
        <option key={604800} value={604800}>
          {t('recency.last_week')}
        </option>
        <option key={2629746} value={2629746}>
          {t('recency.last_month')}
        </option>
        <option key={7889238} value={7889238}>
          {t('recency.last_3_months')}
        </option>
        <option key={15778476} value={15778476}>
          {t('recency.last_6_months')}
        </option>
        <option key={31556952} value={31556952}>
          {t('recency.last_year')}
        </option>
      </select>
    </div>
  )
}

export default FilterBar