import map from 'lodash/map'

import { OutsideClick } from 'features/OutsideClick'
import { Date as DateIcon } from 'features/Icons/Date'

import { useDateFilter } from './hooks'
import { DatePicker } from '../DatePicker'
import {
  Wrapper,
  MonthWrapper,
  WeekDaysWrapper,
  ArrowButton,
  Arrow,
  DateButton,
  MonthYear,
  Week,
  WeekDay,
  WeekName,
  WeekNumber,
} from './styled'

export const DateFilter = () => {
  const {
    close,
    date,
    isOpen,
    onDateChange,
    onNextClick,
    onPreviousClick,
    onWeekDayClick,
    openDatePicker,
    selectedDate,
    week,
  } = useDateFilter()
  return (
    <Wrapper>
      <MonthWrapper>
        <MonthYear>
          {date.month} {' '} {date.year}
        </MonthYear>
        <DateButton isActive={isOpen} onClick={openDatePicker}>
          <DateIcon />
        </DateButton>
      </MonthWrapper>

      <WeekDaysWrapper>
        <ArrowButton
          aria-label='Previous week'
          onClick={onPreviousClick}
        >
          <Arrow direction='left' />
        </ArrowButton>
        <Week>
          {
            map(week, (day) => (
              <WeekDay
                key={day.name}
                selected={day.date.getDate() === selectedDate.getDate()}
                onClick={() => onWeekDayClick(day.date)}
              >
                <WeekName>{day.name}</WeekName>
                <WeekNumber>{day.date.getDate()}</WeekNumber>
              </WeekDay>
            ))
          }
        </Week>
        <ArrowButton
          aria-label='Next week'
          onClick={onNextClick}
        >
          <Arrow direction='right' />
        </ArrowButton>
      </WeekDaysWrapper>
      {
        isOpen && (
          <OutsideClick onClick={close}>
            <DatePicker
              open
              selected={selectedDate}
              onChange={onDateChange}
            />
          </OutsideClick>
        )
      }
    </Wrapper>
  )
}
