// // ** MUI Imports
// import Box from '@mui/material/Box'
// import Button from '@mui/material/Button'
// import Drawer from '@mui/material/Drawer'
// import Divider from '@mui/material/Divider'
// import Checkbox from '@mui/material/Checkbox'
// import Typography from '@mui/material/Typography'
// import FormControlLabel from '@mui/material/FormControlLabel'

// // ** Third Party Imports
// import DatePicker from 'react-datepicker'

// // ** Icons Imports
// import Icon from 'src/@core/components/icon'

// // ** Types
// import { ThemeColor } from 'src/@core/layouts/types'
// import { SidebarLeftType, CalendarFiltersType } from 'src/types/apps/calendarTypes'

// // ** Styled Component
// import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'

// const SidebarLeft = (props: SidebarLeftType) => {
//   const {
//     store,
//     mdAbove,
//     dispatch,
//     calendarApi,
//     calendarsColor,
//     leftSidebarOpen,
//     leftSidebarWidth,
//     handleSelectEvent,
//     handleAllCalendars,
//     handleCalendarsUpdate,
//     handleLeftSidebarToggle,
//     handleAddEventSidebarToggle
//   } = props

//   const colorsArr = calendarsColor ? Object.entries(calendarsColor) : []

//   const renderFilters = colorsArr.length
//     ? colorsArr.map(([key, value]: string[]) => {
//         return (
//           <FormControlLabel
//             key={key}
//             label={key}
//             control={
//               <Checkbox
//                 color={value as ThemeColor}
//                 checked={store.selectedCalendars.includes(key as CalendarFiltersType)}
//                 onChange={() => dispatch(handleCalendarsUpdate(key as CalendarFiltersType))}
//               />
//             }
//           />
//         )
//       })
//     : null

//   const handleSidebarToggleSidebar = () => {
//     handleAddEventSidebarToggle()
//     dispatch(handleSelectEvent(null))
//   }

//   if (renderFilters) {
//     return (
//       <Drawer
//         open={leftSidebarOpen}
//         onClose={handleLeftSidebarToggle}
//         variant={mdAbove ? 'permanent' : 'temporary'}
//         ModalProps={{
//           disablePortal: true,
//           disableAutoFocus: true,
//           disableScrollLock: true,
//           keepMounted: true // Better open performance on mobile.
//         }}
//         sx={{
//           zIndex: 2,
//           display: 'block',
//           position: mdAbove ? 'static' : 'absolute',
//           '& .MuiDrawer-paper': {
//             borderRadius: 1,
//             boxShadow: 'none',
//             width: leftSidebarWidth,
//             borderTopRightRadius: 0,
//             alignItems: 'flex-start',
//             borderBottomRightRadius: 0,
//             zIndex: mdAbove ? 2 : 'drawer',
//             position: mdAbove ? 'static' : 'absolute'
//           },
//           '& .MuiBackdrop-root': {
//             borderRadius: 1,
//             position: 'absolute'
//           }
//         }}
//       >
//         <Box sx={{ p: 6, width: '100%' }}>
//           <Button fullWidth variant='contained' sx={{ '& svg': { mr: 2 } }} onClick={handleSidebarToggleSidebar}>
//             <Icon icon='tabler:plus' fontSize='1.125rem' />
//             Add Event
//           </Button>
//         </Box>

//         <Divider sx={{ width: '100%', m: '0 !important' }} />
//         <DatePickerWrapper
//           sx={{
//             width: '100%',
//             display: 'flex',
//             justifyContent: 'center',
//             '& .react-datepicker': { boxShadow: 'none !important', border: 'none !important' }
//           }}
//         >
//           <DatePicker inline onChange={date => calendarApi.gotoDate(date)} />
//         </DatePickerWrapper>
//         <Divider sx={{ width: '100%', m: '0 !important' }} />
//         <Box sx={{ p: 6, width: '100%', display: 'flex', alignItems: 'flex-start', flexDirection: 'column' }}>
//           <Typography variant='body2' sx={{ mb: 2, color: 'text.disabled', textTransform: 'uppercase' }}>
//             Filters
//           </Typography>
//           <FormControlLabel
//             label='View All'
//             control={
//               <Checkbox
//                 checked={store.selectedCalendars.length === colorsArr.length}
//                 onChange={e => dispatch(handleAllCalendars(e.target.checked))}
//               />
//             }
//           />
//           {renderFilters}
//         </Box>
//       </Drawer>
//     )
//   } else {
//     return null
//   }
// }

// export default SidebarLeft


// ** MUI Imports
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Drawer from '@mui/material/Drawer'
import Divider from '@mui/material/Divider'

// ** Third Party Imports
import DatePicker from 'react-datepicker'

// ** Icons Imports
import Icon from 'src/@core/components/icon'

// ** Types
import { SidebarLeftType } from 'src/types/apps/calendarTypes'

// ** Styled Component
import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'

const SidebarLeft = (props: SidebarLeftType) => {
  const {
    mdAbove,
    calendarApi,
    leftSidebarOpen,
    leftSidebarWidth,
    handleSelectEvent,
    handleLeftSidebarToggle,
    handleAddEventSidebarToggle
  } = props

  const handleSidebarToggleSidebar = () => {
    handleAddEventSidebarToggle()
    handleSelectEvent(null)
  }

  return (
    <Drawer
      open={leftSidebarOpen}
      onClose={handleLeftSidebarToggle}
      variant={mdAbove ? 'permanent' : 'temporary'}
      ModalProps={{
        disablePortal: true,
        disableAutoFocus: true,
        disableScrollLock: true,
        keepMounted: true // Better open performance on mobile.
      }}
      sx={{
        zIndex: 2,
        display: 'block',
        position: mdAbove ? 'static' : 'absolute',
        '& .MuiDrawer-paper': {
          borderRadius: 1,
          boxShadow: 'none',
          width: leftSidebarWidth,
          borderTopRightRadius: 0,
          alignItems: 'flex-start',
          borderBottomRightRadius: 0,
          zIndex: mdAbove ? 2 : 'drawer',
          position: mdAbove ? 'static' : 'absolute'
        },
        '& .MuiBackdrop-root': {
          borderRadius: 1,
          position: 'absolute'
        }
      }}
    >
      <Box sx={{ p: 6, width: '100%' }}>
        <Button fullWidth variant='contained' sx={{ '& svg': { mr: 2 } }} onClick={handleSidebarToggleSidebar}>
          <Icon icon='tabler:plus' fontSize='1.125rem' />
          Add Future Transaction
        </Button>
      </Box>

      <Divider sx={{ width: '100%', m: '0 !important' }} />
      
      <DatePickerWrapper
        sx={{
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          '& .react-datepicker': { boxShadow: 'none !important', border: 'none !important' }
        }}
      >
        <DatePicker inline onChange={date => calendarApi.gotoDate(date)} />
      </DatePickerWrapper>
    </Drawer>
  )
}

export default SidebarLeft