import { CalendarApi } from '@fullcalendar/core'
import { IconButton, Stack } from '@linagora/twake-mui'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
import MenuIcon from '@mui/icons-material/Menu'
import React, { useState } from 'react'
import { useI18n } from 'twake-i18n'
import SearchBar from './EventSearchBar'
import './Menubar.styl'
import { DatePickerMobile } from './components/DatePickerMobile'
import { Typography } from '@mui/material'
import { SmallNavigationControls } from './components/SmallNavigationControls'

export type MobileMenubarProps = {
  calendarRef: React.RefObject<CalendarApi | null>
  currentDate: Date
  onDateChange?: (date: Date) => void
  handleNavigation: (action: 'prev' | 'next' | 'today') => void
  onOpenSidebar: () => void
}

export const MobileMenubar: React.FC<MobileMenubarProps> = ({
  calendarRef,
  currentDate,
  onDateChange,
  handleNavigation,
  onOpenSidebar
}) => {
  const { t } = useI18n()

  const [openDatePicker, setOpenDatePicker] = useState(false)

  // Use i18n for month names instead of date-fns
  const monthIndex = currentDate.getMonth()
  const year = currentDate.getFullYear()
  const monthName = t(`months.standalone.${monthIndex}`)
  const dateLabel = `${monthName} ${year}`

  const onToggleDatePicker = (): void => {
    setOpenDatePicker(prev => {
      const newState = !prev
      setTimeout(() => {
        calendarRef.current?.updateSize?.()
      }, 0)
      return newState
    })
  }

  return (
    <>
      <header className="menubar menubar--mobile">
        <div className="left-menu">
          <IconButton
            onClick={onOpenSidebar}
            aria-label={t('menubar.toggleSidebar')}
          >
            <MenuIcon />
          </IconButton>
          <div className="menu-items">
            <SmallNavigationControls onNavigate={handleNavigation} />
          </div>
          <div className="menu-items">
            <Stack direction="row" className="current-date-time">
              <Typography
                sx={{ lineHeight: 'unset' }}
                onClick={onToggleDatePicker}
              >
                {dateLabel}
              </Typography>
              <IconButton
                size="small"
                onClick={onToggleDatePicker}
                aria-label={
                  openDatePicker
                    ? t('menubar.hideDatePicker')
                    : t('menubar.showDatePicker')
                }
                title={
                  openDatePicker
                    ? t('menubar.hideDatePicker')
                    : t('menubar.showDatePicker')
                }
                aria-expanded={openDatePicker}
              >
                {openDatePicker ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
              </IconButton>
            </Stack>
          </div>
        </div>
        <div className="right-menu">
          <div className="search-container">
            <SearchBar />
          </div>
        </div>
      </header>

      {openDatePicker ? (
        <DatePickerMobile
          calendarRef={calendarRef}
          currentDate={currentDate}
          onDateChange={onDateChange}
          onCloseDatePicker={() => setOpenDatePicker(false)}
        />
      ) : null}
    </>
  )
}