import { Box, useTheme } from '@mui/material';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import { composeSx } from '@utils/components';
import { isToday } from '@utils/time';

import Tooltip from '../../../Tooltip';

import { type DatePickerDayProps } from './types';

const DatePickerDay = ({
  timezone,
  day,
  getDayTooltip,
  ...dayProps
}: DatePickerDayProps) => {
  const theme = useTheme();

  const today = isToday(day, timezone);
  const tooltip = getDayTooltip?.(day);

  const pickerDay = (
    <PickersDay
      {...dayProps}
      day={day}
      today={today}
      sx={composeSx(
        {
          color: theme.palette.new.text.neutral.brand,
          borderRadius: '8px',
          '&.Mui-selected': {
            backgroundColor:
              theme.palette.new.action.button.background.primary.default,
          },
          '&.MuiPickersDay-today': {
            backgroundColor:
              theme.palette.new.action.button.background.primary.default,
            color: theme.palette.new.action.button.text.primary.default,
            borderColor: 'transparent',
            '&:hover': {
              backgroundColor:
                theme.palette.new.action.button.background.primary.hover,
            },
            '&:focus': {
              backgroundColor:
                theme.palette.new.action.button.background.primary.focus,
            },
            '&.Mui-selected': {
              backgroundColor:
                theme.palette.new.action.button.background.primary.default,
              color: theme.palette.new.action.button.text.primary.default,
            },
          },
        },
        dayProps.sx ?? {},
      )}
    />
  );

  if (tooltip) {
    return (
      <Tooltip title={tooltip}>
        <Box
          component="span"
          sx={{ display: 'inline-block' }}
        >
          {pickerDay}
        </Box>
      </Tooltip>
    );
  }

  return pickerDay;
};

export default DatePickerDay;