'use client'

import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import MenuItem from '@mui/material/MenuItem'
import CircularProgress from '@mui/material/CircularProgress'

import CustomTextField from '@core/components/mui/TextField'
import type { ORDER_STATUS } from '@/types/data'
import { statusOptions } from './orderConstants'

interface OrderStatusDialogProps {
  open: boolean
  onClose: () => void
  t: (key: string) => string
  statusForm: ORDER_STATUS
  setStatusForm: (value: ORDER_STATUS) => void
  statusReason: string
  setStatusReason: (value: string) => void
  onSubmit: () => void
  loading: boolean
  statusLabelMap: Record<ORDER_STATUS, string>
}

const OrderStatusDialog = ({
  open,
  onClose,
  t,
  statusForm,
  setStatusForm,
  statusReason,
  setStatusReason,
  onSubmit,
  loading,
  statusLabelMap
}: OrderStatusDialogProps) => {
  return (
    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
      <DialogTitle>
        <Stack direction='row' spacing={2} alignItems='center'>
          <Box
            sx={{
              width: 40,
              height: 40,
              borderRadius: 2,
              bgcolor: 'primary.lighter',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <i className='tabler-arrows-shuffle text-xl' style={{ color: 'var(--mui-palette-primary-main)' }} />
          </Box>
          <Typography variant='h6' fontWeight={600}>
            {t('updateStatus')}
          </Typography>
        </Stack>
      </DialogTitle>
      <DialogContent>
        <Stack spacing={2}>
          <CustomTextField
            select
            label={t('status')}
            value={statusForm}
            onChange={e => setStatusForm(e.target.value as ORDER_STATUS)}
            fullWidth
          >
            {statusOptions?.map(status => (
              <MenuItem key={status} value={status}>
                {statusLabelMap[status]}
              </MenuItem>
            ))}
          </CustomTextField>
          {statusForm === 'cancelled' && (
            <CustomTextField
              multiline
              rows={3}
              label={t('cancellationReason')}
              value={statusReason}
              onChange={e => setStatusReason(e.target.value)}
              fullWidth
            />
          )}
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} variant='outlined'>
          {t('cancel')}
        </Button>
        <Button
          onClick={onSubmit}
          variant='contained'
          disabled={loading}
          startIcon={loading ? <CircularProgress size={16} color='inherit' /> : <i className='tabler-device-floppy' />}
        >
          {t('save')}
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default OrderStatusDialog
