// React Imports
import { useState } from 'react'

// MUI Imports
import Drawer from '@mui/material/Drawer'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import Divider from '@mui/material/Divider'

// Third-party Imports
import classnames from 'classnames'
import PerfectScrollbar from 'react-perfect-scrollbar'

// Type Imports
import type { ThemeColor } from '@core/types'

type Props = {
  isBelowMdScreen: boolean
  sidebarOpen: boolean
  setSidebarOpen: (value: boolean) => void
  activeFilter: string
  setActiveFilter: (filter: string) => void
  selectedLabel: string | null
  setSelectedLabel: (label: string | null) => void
  onAddTask: () => void
}

type FilterType = {
  id: string
  label: string
  icon: string
}

type LabelType = {
  name: string
  color: ThemeColor
}

const navigationItems: FilterType[] = [
  { id: 'all', label: 'همه', icon: 'tabler-layers' }
]

const filters: FilterType[] = [
  { id: 'starred', label: 'ستاره‌دار', icon: 'tabler-star' },
  { id: 'important', label: 'مهم', icon: 'tabler-info-circle' },
  { id: 'completed', label: 'تکمیل شده', icon: 'tabler-check' },
  { id: 'trashed', label: 'حذف شده', icon: 'tabler-trash' }
]

const labels: LabelType[] = [
  { name: 'Frontend', color: 'primary' },
  { name: 'Backend', color: 'warning' },
  { name: 'Doc', color: 'success' },
  { name: 'Bug', color: 'error' }
]

const labelColorClasses: Record<string, string> = {
  Frontend: 'text-primary',
  Backend: 'text-warning',
  Doc: 'text-success',
  Bug: 'text-error'
}

const TodoSidebar = (props: Props) => {
  // Props
  const {
    isBelowMdScreen,
    sidebarOpen,
    setSidebarOpen,
    activeFilter,
    setActiveFilter,
    selectedLabel,
    setSelectedLabel,
    onAddTask
  } = props

  const handleFilterClick = (filterId: string) => {
    setActiveFilter(filterId)
    setSelectedLabel(null)
  }

  const handleLabelClick = (labelName: string) => {
    setSelectedLabel(labelName)
    setActiveFilter('all')
  }

  return (
    <Drawer
      open={!isBelowMdScreen || sidebarOpen}
      onClose={() => setSidebarOpen(false)}
      className='bs-full'
      variant={!isBelowMdScreen ? 'permanent' : 'persistent'}
      ModalProps={{ disablePortal: true, keepMounted: true }}
      sx={{
        zIndex: isBelowMdScreen && sidebarOpen ? 11 : 10,
        position: !isBelowMdScreen ? 'static' : 'absolute',
        '& .MuiDrawer-paper': {
          boxShadow: 'none',
          overflow: 'hidden',
          width: '260px',
          position: !isBelowMdScreen ? 'static' : 'absolute',
          borderRight: '1px solid var(--mui-palette-divider)'
        }
      }}
    >
      <CardContent className='pbe-4'>
        <Button color='primary' variant='contained' fullWidth onClick={onAddTask} startIcon={<i className='tabler-plus' />}>
          افزودن وظیفه
        </Button>
      </CardContent>
      <PerfectScrollbar>
        <div className='flex flex-col plb-4'>
          <List className='p-0'>
            {navigationItems.map(item => (
              <ListItem key={item.id} disablePadding className='pli-6'>
                <ListItemButton
                  selected={activeFilter === item.id && !selectedLabel}
                  onClick={() => handleFilterClick(item.id)}
                  className={classnames('rounded-md', {
                    'bg-actionHover': activeFilter === item.id && !selectedLabel
                  })}
                >
                  <ListItemIcon className='min-is-[40px]'>
                    <i className={classnames(item.icon, 'text-xl')} />
                  </ListItemIcon>
                  <ListItemText primary={item.label} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
          <Divider className='m-4' />
          <Typography variant='h6' className='pli-6 pbe-2'>
            فیلترها
          </Typography>
          <List className='p-0'>
            {filters.map(filter => (
              <ListItem key={filter.id} disablePadding className='pli-6'>
                <ListItemButton
                  selected={activeFilter === filter.id && !selectedLabel}
                  onClick={() => handleFilterClick(filter.id)}
                  className={classnames('rounded-md', {
                    'bg-actionHover': activeFilter === filter.id && !selectedLabel
                  })}
                >
                  <ListItemIcon className='min-is-[40px]'>
                    <i className={classnames(filter.icon, 'text-xl')} />
                  </ListItemIcon>
                  <ListItemText primary={filter.label} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
          <Divider className='m-4' />
          <Typography variant='h6' className='pli-6 pbe-2'>
            برچسب‌ها
          </Typography>
          <List className='p-0'>
            {labels.map(label => (
              <ListItem key={label.name} disablePadding className='pli-6'>
                <ListItemButton
                  selected={selectedLabel === label.name}
                  onClick={() => handleLabelClick(label.name)}
                  className={classnames('rounded-md', {
                    'bg-actionHover': selectedLabel === label.name
                  })}
                >
                  <ListItemIcon className='min-is-[40px]'>
                    <span
                      className={classnames('inline-block rounded-full bs-2 is-2', labelColorClasses[label.name])}
                      style={{ backgroundColor: `var(--mui-palette-${label.color}-main)` }}
                    />
                  </ListItemIcon>
                  <ListItemText primary={label.name} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </div>
      </PerfectScrollbar>
    </Drawer>
  )
}

export default TodoSidebar

