import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => {
  const dateItem = {
    width: '40px',
    height: '40px',
    borderRadius: theme.spacing(0.5),
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex'
  };

  return {
    inputLabel: {
      overflow: 'inherit'
    },
    monthButtonText: {
      ...theme.typography.h4,
      color: theme.palette.primary[500],
      paddingTop: 0,
      '&:hover': {
        color: theme.palette.primary[500]
      }
    },
    arrowIconButton: {
      height: '16px',
      padding: 0
    },
    arrow: {
      width: '16px !important',
      color: theme.palette.primary[400]
    },
    menuList: {
      width: '100% !important',
      paddingRight: '0 !important',
      paddingTop: '0 !important',
      paddingBottom: 0,
      '& .react-datepicker': {
        padding: theme.spacing(2, 2, 1, 2)
      },
      '& .react-datepicker__day-names': {
        display: 'flex',
        justifyContent: 'space-between',
        paddingBottom: theme.spacing(0.5),
        paddingTop: theme.spacing(2),
        color: theme.palette.primary[600],
        '& :not(:last-child)': {
          marginRight: theme.spacing(2 / 8)
        },
        '& .react-datepicker__day-name': {
          ...dateItem,
          backgroundColor: theme.palette.secondary[100]
        }
      },
      '& .react-datepicker__month': {
        '& :not(:last-child)': {
          marginBottom: theme.spacing(1 / 8)
        },
        '& .react-datepicker__week': {
          display: 'flex',
          justifyContent: 'space-between',
          '& .react-datepicker__day--in-selecting-range': {
            backgroundColor: theme.palette.secondary[100]
          },
          '& .react-datepicker__day:hover:not(.react-datepicker__day--range-start, .react-datepicker__day--range-end, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selected, .react-datepicker__day--disabled)':
            {
              backgroundColor: theme.palette.secondary[100]
            },
          '& .react-datepicker__day': {
            ...dateItem,
            cursor: 'pointer',
            color: theme.palette.primary[500]
          },
          '& .react-datepicker__day--in-range': {
            backgroundColor: theme.palette.secondary[100],
            color: theme.palette.primary[600]
          },
          '& .react-datepicker__day--range-start , .react-datepicker__day--selecting-range-start , .react-datepicker__day--range-end, .react-datepicker__day--selected':
            {
              backgroundColor: theme.palette.secondary[500],
              color: theme.palette.common.white
            },
          '& .react-datepicker__day--disabled': {
            cursor: 'default',
            color: theme.palette.secondary[300]
          }
        }
      }
    },
    customHeaderContainer: {
      paddingBottom: theme.spacing(2),
      '& div:first-child > button': {
        paddingBottom: 0
      },
      '& div:last-child': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }
    },
    calendarMenu: {
      '& section.MuiBox-root > ul.MuiList-root > div.MuiListItem-gutters:last-child': {
        marginBottom: theme.spacing(2)
      }
    }
  };
});

export default createClasses;