import React, { useState } from 'react'
import { Head } from '@inertiajs/react'
import ModalInput from '@/Components/ModalInput'
import DeleteButton from '@/Components/DeleteButton'

export default function PaymentType({ tableName, paymentType, fields }) {
    const [selectedPaymentType, setSelectedPaymentType] = useState(null)
    const [isDeleteOpen, setDeleteOpen] = useState(false)

    const deleteModal = (item) => {
        setSelectedPaymentType(item)
        setDeleteOpen(true)
    }

    return (
        <div>
            <Head title="Daftar Payment Type" />
            <h1>Data Payment Type</h1>

            <ModalInput fields={fields} tableName="payment_types" initialData={selectedPaymentType} onClose={() => setSelectedPaymentType(null)} />
            <label htmlFor="modal_input" className='btn btn-secondary' onClick={() => setSelectedPaymentType(null)}>Tambah Payment Type</label>

            {paymentType ? paymentType.map((item, i) => {
                return (
                    <div key={i}>
                        <p>Payment type: {item.payment_type}</p>
                        <div className='mt-2'>
                            <button className='btn btn-primary btn-sm' onClick={() => {
                                setSelectedPaymentType(item)
                                document.getElementById('modal_input').checked = true
                            }}>
                                Edit
                            </button>

                            <button className='btn btn-error btn-sm text-white ml-2' onClick={() => {
                                deleteModal(item)
                            }}>Hapus</button>
                        </div>
                    </div>
                )
            }) : ""}

            <DeleteButton isOpen={isDeleteOpen} onClose={() => setDeleteOpen(false)} item={selectedPaymentType} tableName="payment_types" />
        </div>
    )
}