import {
  isPrevMonthAllowed as checkPrevMonthAllowed,
  isNextMonthAllowed as checkNextMonthAllowed,
} from 'shared-utils/calendar/date-validation'
import { PktIcon } from '../icon/Icon'
import type { ICalendarNavProps } from './types'

export const CalendarNav = ({
  componentId,
  strings,
  year,
  month,
  earliest,
  latest,
  withcontrols,
  prevMonth,
  nextMonth,
  changeMonth,
}: ICalendarNavProps) => {
  const renderMonthNavButton = (direction: 'prev' | 'next') => {
    const isPrev = direction === 'prev'
    const isAllowed = isPrev
      ? checkPrevMonthAllowed(year, month, earliest)
      : checkNextMonthAllowed(year, month, latest)
    const label = isPrev ? strings.prevMonth : strings.nextMonth
    const iconName = isPrev ? 'chevron-thin-left' : 'chevron-thin-right'
    const btnClassName = isPrev ? 'pkt-calendar__prev-month' : 'pkt-calendar__next-month'
    const onClick = isPrev ? prevMonth : nextMonth

    return (
      <div>
        <button
          type="button"
          aria-label={label}
          onClick={() => isAllowed && onClick()}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault()
              if (isAllowed) onClick()
            }
          }}
          className={[
            'pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only',
            btnClassName,
            !isAllowed && 'pkt-invisible',
          ].filter(Boolean).join(' ')}
          data-disabled={!isAllowed ? 'disabled' : undefined}
          aria-disabled={!isAllowed || undefined}
          tabIndex={isAllowed ? 0 : -1}
        >
          <PktIcon className="pkt-btn__icon" name={iconName} />
          <span className="pkt-btn__text">{label}</span>
        </button>
      </div>
    )
  }

  const renderMonthNav = () => {
    if (withcontrols) {
      return (
        <div className="pkt-cal-month-picker">
          <label htmlFor={`${componentId}-monthnav`} className="pkt-hide">{strings.month}</label>
          <select
            aria-label={strings.month}
            className="pkt-input pkt-input-compact"
            id={`${componentId}-monthnav`}
            value={month}
            onChange={(e) => {
              e.stopPropagation()
              changeMonth(year, parseInt(e.target.value))
            }}
          >
            {strings.months.map((monthName, index) => (
              <option key={index} value={index}>
                {monthName}
              </option>
            ))}
          </select>
          <label htmlFor={`${componentId}-yearnav`} className="pkt-hide">{strings.year}</label>
          <input
            aria-label={strings.year}
            className="pkt-input pkt-cal-input-year pkt-input-compact"
            id={`${componentId}-yearnav`}
            type="number"
            size={4}
            placeholder="0000"
            value={year}
            onChange={(e) => {
              e.stopPropagation()
              changeMonth(parseInt(e.target.value), month)
            }}
          />
        </div>
      )
    }

    return (
      <div className="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
        {strings.months[month]} {year}
      </div>
    )
  }

  return (
    <nav className="pkt-cal-month-nav">
      {renderMonthNavButton('prev')}
      {renderMonthNav()}
      {renderMonthNavButton('next')}
    </nav>
  )
}