import React, { useState } from 'react'

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

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

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

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

const SavingViaTimeBased = () => {
  const [data, setData] = useState<TimeBasedSaving[]>([
    {
      id: '1',
      type: 'monthly',
      sourceOfFund: 'wallet',
      amount: 500,
      balance: 500
    },
    {
      id: '2',
      type: 'weekly',
      sourceOfFund: 'bank',
      amount: 100,
      balance: 100
    }
  ])
  const [modalOpen, setModalOpen] = useState(false)
  const [editItem, setEditItem] = useState<TimeBasedSaving | null>(null)

  const columns = [
    { field: 'type', headerName: 'Type', flex: 0.2, renderCell: ({ row }: any) => row.type.split('-').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') },
    { field: 'sourceOfFund', headerName: 'Source Of Fund', flex: 0.2, renderCell: ({ row }: any) => row.sourceOfFund.charAt(0).toUpperCase() + row.sourceOfFund.slice(1) },
    { field: 'amount', headerName: 'Amount', flex: 0.2, renderCell: ({ row }: any) => `$${row.amount.toFixed(2)}` },
    { field: 'balance', headerName: 'Balance', flex: 0.2, renderCell: ({ row }: any) => `$${row.balance.toFixed(2)}` }
  ]

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

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

  const handleDelete = (row: TimeBasedSaving) => {
    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='Time Based Savings'
        data={data}
        columns={columns}
        onAdd={handleAdd}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />
      <TimeBasedModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSave={handleSave}
        editData={editItem}
      />
    </Box>
  )
}

export default SavingViaTimeBased