import React, { useState } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'

// ** Components
import CommonTable from './CommonTable'
import EventBasedModal from './EventBasedModal'

// ** Types
import { EventBasedSaving } from '../types'

// ** Toast
import toast from 'react-hot-toast'

const SavingViaEventBased = () => {
  const [data, setData] = useState<EventBasedSaving[]>([
    {
      id: '1',
      eventType: 'adding-money-to-wallet',
      sourceOfFund: 'wallet',
      savingType: 'percentage',
      amount: 0,
      percentage: 5,
      balance: 0
    },
    {
      id: '2',
      eventType: 'bill-payment',
      sourceOfFund: 'bank',
      savingType: 'fixed',
      amount: 25,
      percentage: 0,
      balance: 25
    }
  ])
  const [modalOpen, setModalOpen] = useState(false)
  const [editItem, setEditItem] = useState<EventBasedSaving | null>(null)

  const formatEventLabel = (event: string) => {
    return event.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
  }

  const columns = [
    { field: 'eventType', headerName: 'Type', flex: 0.25, renderCell: ({ row }: any) => formatEventLabel(row.eventType) },
    { field: 'sourceOfFund', headerName: 'Source Of Fund', flex: 0.15, renderCell: ({ row }: any) => row.sourceOfFund.charAt(0).toUpperCase() + row.sourceOfFund.slice(1) },
    { 
      field: 'amount', 
      headerName: 'Amount', 
      flex: 0.2, 
      renderCell: ({ row }: any) => row.savingType === 'fixed' ? `$${row.amount.toFixed(2)}` : `${row.percentage}%`
    },
    { field: 'balance', headerName: 'Balance', flex: 0.2, renderCell: ({ row }: any) => row.savingType === 'fixed' ? `$${row.balance.toFixed(2)}` : 'N/A' }
  ]

  const handleAdd = () => {
    setEditItem(null)
    setModalOpen(true)
  }

  const handleEdit = (row: EventBasedSaving) => {
    setEditItem(row)
    setModalOpen(true)
  }

  const handleDelete = (row: EventBasedSaving) => {
    setData(data.filter(item => item.id !== row.id))
    toast.success('Saving deleted successfully!')
  }

  const handleSave = (newData: any) => {
    if (editItem) {
      setData(data.map(item => item.id === editItem.id ? { ...newData, id: item.id } : item))
      toast.success('Saving updated successfully!')
    } else {
      setData([...data, { ...newData, id: Date.now().toString() }])
      toast.success('Saving added successfully!')
    }
    setModalOpen(false)
  }

  return (
    <Box>
      <CommonTable
        title='Event Based Savings'
        data={data}
        columns={columns}
        onAdd={handleAdd}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />
      <EventBasedModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSave={handleSave}
        editData={editItem}
      />
    </Box>
  )
}

export default SavingViaEventBased