'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 { PAYMENT_STATUS } from '@/types/data'
import { paymentOptions } from './orderConstants'

interface OrderPaymentDialogProps {
  open: boolean
  onClose: () => void
  t: (key: string) => string
  paymentForm: PAYMENT_STATUS
  setPaymentForm: (value: PAYMENT_STATUS) => void
  paymentMethod: string
  setPaymentMethod: (value: string) => void
  onSubmit: () => void
  loading: boolean
  paymentLabelMap: Record<PAYMENT_STATUS, string>
}

const OrderPaymentDialog = ({
  open,
  onClose,
  t,
  paymentForm,
  setPaymentForm,
  paymentMethod,
  setPaymentMethod,
  onSubmit,
  loading,
  paymentLabelMap
}: OrderPaymentDialogProps) => {
  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-credit-card text-xl' style={{ color: 'var(--mui-palette-primary-main)' }} />
          </Box>
          <Typography variant='h6' fontWeight={600}>
            {t('updatePayment')}
          </Typography>
        </Stack>
      </DialogTitle>
      <DialogContent>
        <Stack spacing={2}>
          <CustomTextField
            select
            label={t('paymentStatus')}
            value={paymentForm}
            onChange={e => setPaymentForm(e.target.value as PAYMENT_STATUS)}
            fullWidth
          >
            {paymentOptions?.map(status => (
              <MenuItem key={status} value={status}>
                {paymentLabelMap[status]}
              </MenuItem>
            ))}
          </CustomTextField>
          <CustomTextField
            select
            label={t('paymentMethod')}
            value={paymentMethod}
            onChange={e => setPaymentMethod(e.target.value)}
            fullWidth
          >
            <MenuItem value='cash'>{t('paymentMethods.cash')}</MenuItem>
            <MenuItem value='card'>{t('paymentMethods.card')}</MenuItem>
            <MenuItem value='online'>{t('paymentMethods.online')}</MenuItem>
          </CustomTextField>
        </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 OrderPaymentDialog
