import React, { forwardRef, ReactNode } from 'react'
import { CButton } from '../button/CButton'
import type { ViewTypes } from './types'

export interface CCalendarNavigationProps {
  ariaNavNextMonthLabel?: string
  ariaNavNextYearLabel?: string
  ariaNavPrevMonthLabel?: string
  ariaNavPrevYearLabel?: string
  calendarDate?: Date
  locale?: string
  navigation?: boolean
  navNextDoubleIcon?: ReactNode
  navNextIcon?: ReactNode
  navPrevDoubleIcon?: ReactNode
  navPrevIcon?: ReactNode
  navYearFirst?: boolean | undefined
  onMonthClick: () => void
  onNavigationClick: (direction: string, double?: boolean) => void
  onYearClick: () => void
  view: ViewTypes
}

export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigationProps>(
  (
    {
      ariaNavNextMonthLabel,
      ariaNavNextYearLabel,
      ariaNavPrevMonthLabel,
      ariaNavPrevYearLabel,
      calendarDate,
      locale,
      navigation,
      navNextDoubleIcon,
      navNextIcon,
      navPrevDoubleIcon,
      navPrevIcon,
      navYearFirst,
      onMonthClick,
      onNavigationClick,
      onYearClick,
      view,
    },
    ref
  ) => {
    return (
      <div className="calendar-nav" ref={ref}>
        {navigation && (
          <div className="calendar-nav-prev">
            <CButton
              color="transparent"
              size="sm"
              aria-label={ariaNavPrevYearLabel}
              onClick={() => onNavigationClick('prev', true)}
            >
              {navPrevDoubleIcon ?? (
                <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
              )}
            </CButton>
            {view === 'days' && (
              <CButton
                color="transparent"
                size="sm"
                aria-label={ariaNavPrevMonthLabel}
                onClick={() => onNavigationClick('prev')}
              >
                {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
              </CButton>
            )}
          </div>
        )}
        <div
          className="calendar-nav-date"
          aria-live="polite"
          {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
        >
          {view === 'days' && (
            <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
              {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
            </CButton>
          )}
          <CButton
            color="transparent"
            size="sm"
            onClick={() => navigation && onYearClick()}
            {...(navYearFirst && { style: { order: '-1' } })}
          >
            {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
          </CButton>
        </div>
        {navigation && (
          <div className="calendar-nav-next">
            {view === 'days' && (
              <CButton
                color="transparent"
                size="sm"
                aria-label={ariaNavNextMonthLabel}
                onClick={() => onNavigationClick('next')}
              >
                {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
              </CButton>
            )}
            <CButton
              color="transparent"
              size="sm"
              aria-label={ariaNavNextYearLabel}
              onClick={() => onNavigationClick('next', true)}
            >
              {navNextDoubleIcon ?? (
                <span className="calendar-nav-icon calendar-nav-icon-double-next" />
              )}
            </CButton>
          </div>
        )}
      </div>
    )
  }
)

CCalendarNavigation.displayName = 'CCalendarNavigation'