import { styled } from '@mui/material/styles';

import { varAlpha } from 'src/theme/styles';

// ----------------------------------------------------------------------

export const StyledCalendar = styled('div')(({ theme }) => ({
  width: 'calc(100% + 2px)',
  marginLeft: -1,
  marginBottom: -1,

  '& .fc': {
    '--fc-border-color': varAlpha(theme.vars.palette.grey['500Channel'], 0.16),
    '--fc-now-indicator-color': theme.vars.palette.error.main,
    '--fc-today-bg-color': varAlpha(theme.vars.palette.grey['500Channel'], 0.08),
    '--fc-page-bg-color': theme.vars.palette.background.default,
    '--fc-neutral-bg-color': theme.vars.palette.background.neutral,
    '--fc-list-event-hover-bg-color': theme.vars.palette.action.hover,
    '--fc-highlight-color': theme.vars.palette.action.hover,
  },

  '& .fc .fc-license-message': { display: 'none' },
  '& .fc a': { color: theme.vars.palette.text.primary },

  // Table Head
  '& .fc .fc-col-header ': {
    boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
    '& th': { borderColor: 'transparent' },
    '& .fc-col-header-cell-cushion': { ...theme.typography.subtitle2, padding: '13px 0' },
  },

  // List Empty
  '& .fc .fc-list-empty': {
    ...theme.typography.h6,
    backgroundColor: 'transparent',
    color: theme.vars.palette.text.secondary,
  },

  // Event
  '& .fc .fc-event': {
    borderColor: 'transparent',
    backgroundColor: 'transparent',
  },
  '& .fc .fc-event .fc-event-main': {
    padding: '2px 4px',
    borderRadius: 6,
    color: theme.vars.palette.common.white,
    backgroundColor: 'inherit',
    '&::before': {
      top: 0,
      left: 0,
      width: '100%',
      content: "''",
      opacity: 0.24,
      height: '100%',
      borderRadius: 6,
      position: 'absolute',
      backgroundColor: 'currentColor',
      transition: theme.transitions.create(['opacity']),
    },
    '&:hover': {
      '&::before': {
        opacity: 0.32,
      },
    },
  },
  '& .fc .fc-event .fc-event-main-frame': {
    fontSize: 13,
    lineHeight: '20px',
    color: '#FFFFFF', // Всегда белый текст
    filter: 'brightness(1)', // Убираем затемнение, чтобы текст был чистым
  },
  '& .fc .fc-daygrid-event .fc-event-title': {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: '#FFFFFF', // Белый текст
    textOverflow: 'ellipsis',
  },
  '& .fc .fc-event .fc-event-time': {
    overflow: 'unset',
    color: '#FFFFFF', // Белый текст
    fontWeight: theme.typography.fontWeightBold,
  },

  // Popover
  '& .fc .fc-popover': {
    border: 0,
    overflow: 'hidden',
    boxShadow: theme.customShadows.dropdown,
    borderRadius: theme.shape.borderRadius * 1.5,
    backgroundColor: theme.vars.palette.background.paper,
  },
  '& .fc .fc-popover-header': {
    ...theme.typography.subtitle2,
    padding: theme.spacing(1),
    backgroundColor: varAlpha(theme.vars.palette.grey['500Channel'], 0.08),
  },
  '& .fc .fc-popover-close': {
    opacity: 0.48,
    transition: theme.transitions.create(['opacity']),
    '&:hover': { opacity: 1 },
  },
  '& .fc .fc-more-popover .fc-popover-body': { padding: theme.spacing(1) },
  '& .fc .fc-popover-body': {
    '& .fc-daygrid-event.fc-event-start, & .fc-daygrid-event.fc-event-end': { margin: '2px 0' },
  },

  // Month View
  '& .fc .fc-day-other .fc-daygrid-day-top': {
    opacity: 1,
    '& .fc-daygrid-day-number': { color: theme.vars.palette.text.disabled },
  },
  '& .fc .fc-daygrid-day-number': { ...theme.typography.body2, padding: theme.spacing(1, 1, 0) },
  '& .fc .fc-daygrid-event': { marginTop: 4 },
  '& .fc .fc-daygrid-event.fc-event-start, & .fc .fc-daygrid-event.fc-event-end': {
    marginLeft: 4,
    marginRight: 4,
  },
  '& .fc .fc-daygrid-more-link': {
    ...theme.typography.caption,
    color: theme.vars.palette.text.secondary,
    '&:hover': {
      backgroundColor: 'unset',
      textDecoration: 'underline',
      color: theme.vars.palette.text.primary,
      fontWeight: theme.typography.fontWeightMedium,
    },
  },

  // Week & Day View
  '& .fc .fc-timegrid-axis-cushion': {
    ...theme.typography.body2,
    color: theme.vars.palette.text.secondary,
  },
  '& .fc .fc-timegrid-slot-label-cushion': { ...theme.typography.body2 },

  // Agenda View
  '& .fc-direction-ltr .fc-list-day-text, .fc-direction-rtl .fc-list-day-side-text, .fc-direction-ltr .fc-list-day-side-text, .fc-direction-rtl .fc-list-day-text':
    { ...theme.typography.subtitle2 },
  '& .fc .fc-list-event': {
    ...theme.typography.body2,
    '& .fc-list-event-time': { color: theme.vars.palette.text.secondary },
  },
  '& .fc .fc-list-table': { '& th, td': { borderColor: 'transparent' } },
}));
