import Box from '../../box'
import { styled, th } from '../../core'
import { cs } from '../../utils'
import { CalendarItem, CalendarItemsContainer } from '../calendar.styles'
import { ItemProps, TimeResult } from '../calendar.types'
import { weekDays } from '../consts'

type DayPickerProps = {
  calendar: TimeResult
  onSelectDay?: (date: Date) => void
}

const DayItem = styled(CalendarItem)<ItemProps>`
  aspect-ratio: 1;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  color: ${th.color('seaBlue.main')};
  display: inline-flex;
  align-items: center;
`

const DaysContainer = styled(CalendarItemsContainer)`
  grid-template-columns:     repeat(7, 1fr);
  grid- template-rows: auto;
`

export const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (
  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>
    {weekDays.map((day, index) => (
      <Box
        border={0}
        className="dayHeader"
        color="seaBlue.main"
        fontSize={16}
        fontWeight={500}
        key={`week-day-${index}`}
      >
        {day}
      </Box>
    ))}
    {calendar.items.map(item => (
      <DayItem
        className={cs('vui-day-item')}
        key={item.date.getTime()}
        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}
        {...item}
      >
        {item.date.getUTCDate()}
      </DayItem>
    ))}
  </DaysContainer>
)
