import React, { useState, useEffect } from 'react'

// ** MUI Imports
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 TextField from '@mui/material/TextField'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import Grid from '@mui/material/Grid'
import IconButton from '@mui/material/IconButton'

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

// ** Types
import { FrequencyType, SourceOfFundType, TimeBasedSaving } from '../types'

interface TimeBasedModalProps {
  open: boolean
  onClose: () => void
  onSave: (data: any) => void
  editData?: TimeBasedSaving | null
}

const TimeBasedModal = ({ open, onClose, onSave, editData }: TimeBasedModalProps) => {
  const [frequency, setFrequency] = useState<FrequencyType>('one-time')
  const [sourceOfFund, setSourceOfFund] = useState<SourceOfFundType>('wallet')
  const [amount, setAmount] = useState<string>('')

  useEffect(() => {
    if (editData) {
      setFrequency(editData.type as FrequencyType)
      setSourceOfFund(editData.sourceOfFund)
      setAmount(editData.amount.toString())
    } else {
      setFrequency('one-time')
      setSourceOfFund('wallet')
      setAmount('')
    }
  }, [editData, open])

  const handleSave = () => {
    if (!amount || parseFloat(amount) <= 0) {
      return
    }

    onSave({
      type: frequency,
      sourceOfFund,
      amount: parseFloat(amount),
      balance: parseFloat(amount)
    })
    handleClose()
  }

  const handleClose = () => {
    setFrequency('one-time')
    setSourceOfFund('wallet')
    setAmount('')
    onClose()
  }

  const frequencies: FrequencyType[] = [
    'one-time',
    'daily',
    'weekly',
    'once-in-two-weeks',
    'monthly',
    'quarterly',
    'half-yearly',
    'yearly'
  ]

  return (
    <Dialog open={open} onClose={handleClose} maxWidth='sm' fullWidth>
      <DialogTitle>
        Saving Details
        <IconButton
          aria-label='close'
          onClick={handleClose}
          sx={{ position: 'absolute', right: 8, top: 8 }}
        >
          <Icon icon='tabler:x' />
        </IconButton>
      </DialogTitle>
      <DialogContent>
        <Grid container spacing={4} sx={{ mt: 1 }}>
          <Grid item xs={12}>
            <FormControl fullWidth>
              <InputLabel>Frequency</InputLabel>
              <Select value={frequency} label='Frequency' onChange={(e) => setFrequency(e.target.value as FrequencyType)}>
                {frequencies.map((freq) => (
                  <MenuItem key={freq} value={freq}>
                    {freq.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <FormControl fullWidth>
              <InputLabel>Source Of Funds</InputLabel>
              <Select value={sourceOfFund} label='Source Of Funds' onChange={(e) => setSourceOfFund(e.target.value as SourceOfFundType)}>
                <MenuItem value='wallet'>Wallet</MenuItem>
                <MenuItem value='bank'>Bank</MenuItem>
                <MenuItem value='card'>Card</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <TextField
              fullWidth
              type='number'
              label='Amount'
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              InputProps={{ inputProps: { min: 0, step: 0.01 } }}
            />
          </Grid>
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color='secondary'>
          Cancel
        </Button>
        <Button onClick={handleSave} variant='contained'>
          Save
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default TimeBasedModal