import React from 'react'

import { cs } from '../../utils'
import { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'
import { TimeResult } from '../calendar.types'
import { monthsShort } from '../consts'

type MonthPickerProps = {
  calendar: TimeResult
  onSelectMonth?: (date: Date) => void
}

export const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (
  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows="repeat(4, 65px)">
    {calendar.items.map(item => (
      <MonthItem
        fontWeight={500}
        key={item.date.getTime()}
        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}
        {...item}
      >
        {monthsShort[item.date.getUTCMonth()]}
      </MonthItem>
    ))}
  </CalendarItemsContainer>
)
