'use client'

// React Imports
import { useTranslations } from 'next-intl'

// MUI Imports
import Drawer from '@mui/material/Drawer'
import Typography from '@mui/material/Typography'
import Checkbox from '@mui/material/Checkbox'
import FormControlLabel from '@mui/material/FormControlLabel'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import Divider from '@mui/material/Divider'
import Box from '@mui/material/Box'

// Component Imports
import PerfectScrollbar from 'react-perfect-scrollbar'

// Config
import type { RowId, CardId } from '@views/dashboards/farm/farmDashboardConfig'
import { ROW_IDS } from '@views/dashboards/farm/farmDashboardConfig'

type RowCardsType = Record<RowId, CardId[]>
type RowLabelsType = Record<RowId, string>
type CardLabelsType = Record<CardId, string>

type FarmDashboardSettingsDrawerProps = {
  open: boolean
  onClose: () => void
  disabledCardIds: string[]
  onToggleCard: (cardId: CardId, disabled: boolean) => void
  cardLabels: CardLabelsType
  rowLabels: RowLabelsType
  rowCards: RowCardsType
}

const FarmDashboardSettingsDrawer = (props: FarmDashboardSettingsDrawerProps) => {
  const t = useTranslations('farmDashboard')
  const { open, onClose, disabledCardIds, onToggleCard, cardLabels, rowLabels, rowCards } = props
  const disabledSet = new Set(disabledCardIds)

  return (
    <Drawer
      open={open}
      onClose={onClose}
      anchor='right'
      variant='temporary'
      ModalProps={{
        disablePortal: true,
        disableAutoFocus: true,
        disableScrollLock: true,
        keepMounted: true
      }}
      PaperProps={{
        className: 'is-[320px] shadow-none'
      }}
      sx={{ zIndex: 'drawer' }}
    >
      <Box className='flex flex-col is-full' sx={{ height: '100%' }}>
        <Box className='p-6'>
          <Typography variant='h5'>{t('settings.title')}</Typography>
          <Typography variant='body2' color='text.secondary' sx={{ mt: 0.5 }}>
            {t('settings.toggleCards')}
          </Typography>
        </Box>
        <Divider />
        <PerfectScrollbar options={{ wheelPropagation: false }} className='flex-1'>
          <List className='p-4'>
            {ROW_IDS.map(rowId => (
              <Box key={rowId}>
                <Typography variant='subtitle2' color='text.secondary' sx={{ px: 2, py: 1 }}>
                  {rowLabels[rowId]}
                </Typography>
                {rowCards[rowId].map(cardId => {
                  const isDisabled = disabledSet.has(cardId)
                  return (
                    <ListItem key={cardId} disablePadding sx={{ py: 0.5 }}>
                      <FormControlLabel
                        control={
                          <Checkbox
                            checked={!isDisabled}
                            onChange={e => onToggleCard(cardId, !e.target.checked)}
                            size='small'
                          />
                        }
                        label={<ListItemText primary={cardLabels[cardId]} primaryTypographyProps={{ variant: 'body2' }} />}
                        sx={{ m: 0, width: '100%' }}
                      />
                    </ListItem>
                  )
                })}
                <Divider component='li' sx={{ my: 2 }} />
              </Box>
            ))}
          </List>
        </PerfectScrollbar>
      </Box>
    </Drawer>
  )
}

export default FarmDashboardSettingsDrawer