import type { ReactDatePickerProps } from 'react-datepicker'
import DatePickerComponent from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

import { useLexicsStore } from 'features/LexicsStore'

import { getDisplayDate } from '../DateFilter/helpers'
import { useDatepickerLocales } from './hooks'
import { Arrow } from '../DateFilter/styled'
import {
  Wrapper,
  MonthsWrapper,
  CurrentMonth,
  MonthButton,
} from './styled'

type Args = (
  Parameters<NonNullable<ReactDatePickerProps['renderCustomHeader']>>[0]
  & { lang: string }
)

const renderCustomHeader = ({
  date,
  decreaseMonth,
  increaseMonth,
  lang,
}: Args) => {
  const currentDate = getDisplayDate({
    date,
    lang,
  })
  return (
    <MonthsWrapper>
      <MonthButton onClick={decreaseMonth}>
        <Arrow direction='left' />
      </MonthButton>
      <CurrentMonth>{currentDate.month}, {currentDate.year}</CurrentMonth>
      <MonthButton onClick={increaseMonth}>
        <Arrow direction='right' />
      </MonthButton>
    </MonthsWrapper>
  )
}

type Props = Pick<ReactDatePickerProps, (
  | 'onChange'
  | 'open'
  | 'selected'
)>

export const DatePicker = ({
  onChange,
  open,
  selected,
}: Props) => {
  const { lang } = useLexicsStore()
  useDatepickerLocales()
  return (
    <Wrapper>
      <DatePickerComponent
        open={open}
        selected={selected}
        onChange={onChange}
        renderCustomHeader={(props) => renderCustomHeader({ ...props, lang })}
      />
    </Wrapper>
  )
}
