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

export default function IndexSantri({ santri, fields, options }) {
    const [selectedSantri, setSelectedSantri] = useState(null)
    const [isDeleteOpen, setDeleteOpen] = useState(false)

    const openDeleteModal = (item) => {
        setSelectedSantri(item)
        setDeleteOpen(true)
    }


    return (
        <div className="text-red-900">
            <Head title="Daftar Santri" />
            <h1>Daftar Santri</h1>

            <ModalInput
                fields={fields}
                options={options}
                tableName="santris"
                initialData={selectedSantri}
                onClose={() => setSelectedSantri(null)}
            />

            <label htmlFor="modal_input" className="btn btn-primary" onClick={() => setSelectedSantri(null)}>Tambah Santri</label>

            {santri ? santri.map((item, i) => {
                return (
                    <div key={i} className="border p-4 mb-2">
                        <p>Nama: {item.nama}</p>
                        <p>Alamat: {item.alamat}</p>
                        <p>Status: {item.status_santri}</p>
                        <p>Role: {item.role_santri}</p>
                        <p>Jenis Kelamin: {item.jk}</p>
                        <p>Tanggal Lahir: {item.tanggal_lahir}</p>
                        <p>Foto: {item.foto}</p>
                        <div className="mt-2">
                            <button className="btn btn-warning btn-sm" onClick={() => {
                                setSelectedSantri(item)
                                document.getElementById('modal_input').checked = true
                            }}>
                                Edit
                            </button>
                            <button className='btn btn-error btn-sm ml-4 text-white' onClick={() => openDeleteModal(item)}>Hapus</button>
                        </div>
                    </div>
                )
            }) : ""}
            <DeleteButton
                isOpen={isDeleteOpen}
                onClose={() => setDeleteOpen(false)}
                item={selectedSantri}
                tableName="santris"
            />
        </div>
    )
}