import {
  ref, type Ref, computed, type ComputedRef, nextTick,
} from 'vue'
import moment, { type Moment } from 'moment'
// import 'moment/locale/ru'

type UseCalendarOptions = {
  disablePastDates?: boolean
}

export type CalendarDay = {
  date: Moment
  faded: boolean
  disabled: boolean
}

export type Calendar = {
  date: Ref<Moment>
  days: ComputedRef<CalendarDay[]>
  prevMonth: () => void
  nextMonth: () => void
  prevYear: () => void
  nextYear: () => void
}

export function useCalendar(currentDate?: Moment, options: UseCalendarOptions = {}) {
  const date = ref(currentDate ? moment(currentDate) : moment())
  const disablePastDates = options.disablePastDates !== undefined ? options.disablePastDates : false

  // date.value.locale('ru') // Глобальная установка локализации работает только с moment@2.8.0

  const days = computed(() => {
    const start = moment(date.value).startOf('month').startOf('isoWeek')
    const end = moment(date.value).endOf('month').endOf('isoWeek')
    const day = moment(start)
    const days: CalendarDay[] = []

    while (day.isSameOrBefore(end)) {
      days.push({
        date: moment(day),
        faded: !day.isSame(date.value, 'month'),
        disabled: disablePastDates && day.isBefore(moment(), 'day'),
      })

      day.add(1, 'day')
    }

    return days
  })

  const prevMonth = () => { date.value = moment(date.value.add(-1, 'month')) }
  const nextMonth = () => { date.value = moment(date.value.add(1, 'month')) }
  const prevYear = () => { date.value = moment(date.value.add(-1, 'year')) }
  const nextYear = () => { date.value = moment(date.value.add(1, 'year')) }

  return {
    date, days, prevMonth, prevYear, nextMonth, nextYear,
  }
}

export function useCalendarTemplate(calendar: Calendar, days: JSX.Element[]) {
  const arrowClickHandler = (e: MouseEvent, callback: () => unknown) => {
    e.stopPropagation()
    callback()
  }

  const mouseWheelHandler = (e: WheelEvent) => {
    e.preventDefault()
    if (e.deltaY > 0) calendar.nextMonth()
    else calendar.prevMonth()
  }

  return (
    <div class="ark-ui-calendar">
      <div class="ark-ui-calendar-head">

        <div class="ark-ui-calendar-month">
          <div class="ark-ui-calendar-arrow-button" onClick={(e) => arrowClickHandler(e, calendar.prevMonth)}>
            <div class="ark-ui-calendar-arrow-left" />
          </div>
          <div>{ calendar.date.value.toDate().toLocaleString('ru', { month: 'long' }) }</div>
          <div class="ark-ui-calendar-arrow-button" onClick={(e) => arrowClickHandler(e, calendar.nextMonth)}>
            <div class="ark-ui-calendar-arrow-right" />
          </div>
        </div>

        <div class="ark-ui-calendar-year">
          <div class="ark-ui-calendar-arrow-button" onClick={(e) => arrowClickHandler(e, calendar.prevYear)}>
            <div class="ark-ui-calendar-arrow-left" />
          </div>
          <div>{ calendar.date.value.format('YYYY') }</div>
          <div class="ark-ui-calendar-arrow-button" onClick={(e) => arrowClickHandler(e, calendar.nextYear)}>
            <div class="ark-ui-calendar-arrow-right" />
          </div>
        </div>

      </div>

      <div class="ark-ui-calendar-days" onWheel={mouseWheelHandler}>
        <div class="ark-ui-calendar-day faded">Пн</div>
        <div class="ark-ui-calendar-day faded">Вт</div>
        <div class="ark-ui-calendar-day faded">Ср</div>
        <div class="ark-ui-calendar-day faded">Чт</div>
        <div class="ark-ui-calendar-day faded">Пт</div>
        <div class="ark-ui-calendar-day faded">Сб</div>
        <div class="ark-ui-calendar-day faded">Вс</div>

        { days }
      </div>
    </div>
  )
}