'use client'

// React Imports
import { useState, useEffect } from 'react'

// MUI imports
import Box from '@mui/material/Box'
import { useTheme } from '@mui/material/styles'
import type { BoxProps } from '@mui/material/Box'

// Third-party Imports
import { Calendar } from 'react-multi-date-picker'
import DateObject from 'react-date-object'
import persian from 'react-date-object/calendars/persian'
import persian_fa from 'react-date-object/locales/persian_fa'

// Styles - base styles only, we override colors via sx
import 'react-multi-date-picker/styles/colors/teal.css'

interface AppJalaliDatepickerProps {
  value?: Date | null
  onChange?: (date: Date) => void
  boxProps?: BoxProps
}

const AppJalaliDatepicker = (props: AppJalaliDatepickerProps) => {
  const { value: externalValue, onChange, boxProps } = props
  const theme = useTheme()

  const [internalValue, setInternalValue] = useState<DateObject | undefined>(() => {
    const d = externalValue ?? new Date()

    return new DateObject({ date: d, calendar: persian, locale: persian_fa })
  })

  useEffect(() => {
    if (externalValue != null) {
      setInternalValue(new DateObject({ date: externalValue, calendar: persian, locale: persian_fa }))
    }
  }, [externalValue])

  const handleChange = (d: DateObject | null) => {
    if (d) {
      setInternalValue(d as unknown as DateObject)
      onChange?.(d.toDate())
    }
  }

  const displayValue = internalValue ?? new DateObject({ calendar: persian, locale: persian_fa })

  return (
    <Box
      {...boxProps}
      sx={{
        ...(typeof boxProps?.sx === 'object' ? boxProps.sx : {}),
        '& .rmdp-container': {
          width: '100%'
        },
        '& .rmdp-wrapper': {
          boxShadow: 'none !important',
          border: 'none !important',
          backgroundColor: 'var(--mui-palette-background-paper)',
          color: 'var(--mui-palette-text-primary)',
          fontFamily: theme.typography.fontFamily
        },
        '& .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden)': {
          color: 'var(--mui-palette-text-primary)'
        },
        '& .rmdp-day.rmdp-selected span:not(.highlight)': {
          backgroundColor: 'var(--mui-palette-primary-main) !important',
          color: 'var(--mui-palette-common-white) !important'
        },
        '& .rmdp-day.rmdp-today span': {
          backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
          color: 'var(--mui-palette-primary-main)'
        },
        '& .rmdp-week-day': {
          color: 'var(--mui-palette-text-primary)'
        },
        '& .rmdp-header-values': {
          color: 'var(--mui-palette-text-primary)'
        },
        '& .rmdp-arrow': {
          borderColor: 'var(--mui-palette-text-secondary)'
        }
      }}
    >
      <Calendar
        value={displayValue}
        onChange={handleChange as any}
        calendar={persian}
        locale={persian_fa}
        className="teal"
      />
    </Box>
  )
}

export default AppJalaliDatepicker
