import { type FC, memo } from 'react';

import ExpandMoreIcon from '@material-hu/icons/material/ExpandMore';
import AccordionUI from '@material-hu/mui/Accordion';
import AccordionDetails from '@material-hu/mui/AccordionDetails';
import AccordionSummary from '@material-hu/mui/AccordionSummary';
import { styled } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { UpcomingCelebrationsTabs } from 'src/components/dashboard/upcomingCelebrations';
import useCelebrationTitle from 'src/components/dashboard/upcomingCelebrations/hooks/useCelebrationTitle';

const Accordion = styled(AccordionUI)(({ theme }) => ({
  '&.MuiAccordion-root.Mui-expanded': {
    overflow: 'hidden',
  },
  '& .MuiAccordionDetails-root': {
    padding: theme.spacing(0),
  },
  '& .MuiBox-root.scrollbar-container': {
    position: 'relative',
    zIndex: 0,
  },
}));

const UpcomingCelebrationsAccordion: FC = () => {
  const { title: celebrationTitle } = useCelebrationTitle();
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <Accordion
      elevation={0}
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        borderRadius: 1,
        border: theme =>
          `1px solid ${theme.palette.new.border.neutral.default}`,
        '&::before': {
          backgroundColor: 'transparent',
        },
      }}
    >
      <AccordionSummary
        id="upcoming-birthdays-header"
        aria-controls="upcoming-birthdays-content"
        expandIcon={
          <ExpandMoreIcon
            sx={{
              color: theme => theme.palette.new.text.neutral.default,
            }}
          />
        }
        sx={{
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          borderRadius: 1,
        }}
      >
        <Typography
          variant="h6"
          component="span"
          sx={{
            color: theme => theme.palette.new.text.neutral.default,
          }}
        >
          {celebrationTitle}
        </Typography>
      </AccordionSummary>
      <AccordionDetails
        sx={{
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
        }}
      >
        <HuGoThemeProvider>
          <UpcomingCelebrationsTabs />
        </HuGoThemeProvider>
      </AccordionDetails>
    </Accordion>
  );
};

export default memo(UpcomingCelebrationsAccordion);