import { getLaporanNominatifAnggota } from '@/api/api_laporan';
import { ButtonSubmit } from '@/components/costum/button_submit';
import { Select } from '@/components/costum/Select';
import { SelectAgama } from '@/components/costum/SelectAgama';
import { SelectKabupaten } from '@/components/costum/SelectKabupaten';
import { SelectKecamatan } from '@/components/costum/SelectKecamatan';
import { SelectKelurahan } from '@/components/costum/SelectKelurahan';
import { SelectStatus } from '@/components/costum/SelectStatus';
import { SelectStatusMarital } from '@/components/costum/SelectStatusMarital';
import { formatDate } from '@/helper';
import { Anggota } from '@/types';
import { usePage } from '@inertiajs/react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';

const OPTION_JENIS_KELAMIN = [
    {
        label: 'LAKI-LAKI',
        value: 'L',
    },
    {
        label: 'PEREMPUAN',
        value: 'P',
    },
];

export interface LaporanAnggotaProps {
    status?: number;
    jenis_kelamin?: string;
    kelurahan?: string;
    kecamatan?: string;
    kabupaten?: string;
    status_marital?: string;
    agama?: string;
}

export default function LaporanNominatifAnggota() {
    const { token } = usePage().props;
    const [laporan, setLaporan] = useState<LaporanAnggotaProps>({
    });

    const modalLaporanRincian = useModalLaporanAnggota();

    const getLaporan = useCallback(async () => {
        console.log(laporan);
        const response = await getLaporanNominatifAnggota(laporan, token as string);
        const responseBody = await response.json();
        console.log(responseBody);
        modalLaporanRincian.open(responseBody, laporan);
    }, [laporan, modalLaporanRincian, token]);

    return (
        <>
            <div>
                <div className="container" style={{ width: 640 }}>
                    <div className="card rounded-4 shadow-lg">
                        <div className="card-header py-3 bg-transparent">
                            <h5 className="m-0">Laporan Anggota</h5>
                        </div>
                        <div className="card-body">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Kelurahan</label>
                                <div className="col-md-8">
                                    <SelectKelurahan
                                        value={laporan.kelurahan}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, kelurahan: value });
                                            } else {
                                                setLaporan({ ...laporan, kelurahan: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Kecamatan</label>
                                <div className="col-md-8">
                                    <SelectKecamatan
                                        value={laporan.kecamatan}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, kecamatan: value });
                                            } else {
                                                setLaporan({ ...laporan, kecamatan: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Kota / Kabupaten</label>
                                <div className="col-md-8">
                                    <SelectKabupaten
                                        value={laporan.kabupaten}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, kabupaten: value });
                                            } else {
                                                setLaporan({ ...laporan, kabupaten: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Jenis Kelamin</label>
                                <div className="col-md-8">
                                    <Select
                                        options={OPTION_JENIS_KELAMIN}
                                        placeholder="Pilih Jenis Kelamin"
                                        value={OPTION_JENIS_KELAMIN.find((opt) => opt.value === String(laporan.status))}
                                        onChange={(value: unknown) => {
                                            if (value) {
                                                const option = value as { label: string; value: string };
                                                setLaporan({ ...laporan, status: Number(option.value) });
                                            } else {
                                                setLaporan({ ...laporan, status: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Status Marital</label>
                                <div className="col-md-8">
                                    <SelectStatusMarital
                                        value={laporan.status_marital}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, status_marital: value });
                                            } else {
                                                setLaporan({ ...laporan, status_marital: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Agama</label>
                                <div className="col-md-8">
                                    <SelectAgama
                                        value={laporan.agama}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, agama: value });
                                            } else {
                                                setLaporan({ ...laporan, agama: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Status</label>
                                <div className="col-md-8">
                                    <SelectStatus
                                        value={laporan.status?.toString()}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, status: parseInt(value) });
                                            } else {
                                                setLaporan({ ...laporan, status: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="card-footer py-3 justify-content-end d-flex bg-transparent">
                            <ButtonSubmit className="btn btn-primary" onClick={async () => getLaporan()}>
                                Sumbit
                            </ButtonSubmit>
                        </div>
                    </div>
                </div>
            </div>
            {modalLaporanRincian.modal}
        </>
    );
}

const useModalLaporanAnggota = () => {
    const [show, setShow] = useState<boolean>(false);
    const [laporan, setLaporan] = useState<Anggota[]>([]);
    const [filter, setFilter] = useState<LaporanAnggotaProps>();

    const open = (data: Anggota[], filter: LaporanAnggotaProps) => {
        setFilter(filter);
        setLaporan(data);
        setShow(true);
    };
    const close = () => setShow(false);

    const modal = useMemo(() => {
        return (
            <Modal show={show} onHide={close} fullscreen>
                <Modal.Header closeButton>
                    <h6 className="m-0">Laporan Anggota</h6>
                </Modal.Header>
                <Modal.Body className="bg-secondary">
                    <div className="bg-white p-3 container">
                        <div className="text-center">
                            <h6 className="fw-bold">Laporan Anggota</h6>
                        </div>
                        <table className="table-bordered table-sm table table-fixed">
                            <thead>
                                <tr className="bg-light">
                                    <th className="text-center">ID</th>
                                    <th className="text-center">NIK</th>
                                    <th className="text-center">Nama Lengkap</th>
                                    <th className="text-center">TTL</th>
                                    <th className="text-center text-nowrap">Jenis Kel.</th>
                                    <th className="text-center">Alamat</th>
                                    <th className="text-center">Kelurahan</th>
                                    <th className="text-center">Kecamatan</th>
                                    <th className="text-center">Kota</th>
                                    <th className="text-center">Nomor Telp</th>
                                    <th className="text-center text-nowrap">Ibu Kandung</th>
                                    <th className="text-center">Pekerjaan</th>
                                </tr>
                            </thead>
                            <tbody>
                                {laporan?.map((item: Anggota, idx: number) => (
                                    <tr key={item.id || idx}>
                                        <td width={150} className="text-center text-nowrap">{item.id}</td>
                                        <td className="text-center text-nowrap">{item.nik}</td>
                                        <td className='text-nowrap'>{item.nama_lengkap}</td>
                                        <td className='text-nowrap'>{`${item.tempat_lahir}, ${formatDate(item.tgl_lahir)}`}</td>
                                        <td className="text-center text-nowrap">{item.jenis_kelamin == 'L' ? 'Pria' : 'Wanita'}</td>
                                        <td className='text-nowrap'>{item.alamat}</td>
                                        <td className='text-nowrap'>{item.kelurahan}</td>
                                        <td className='text-nowrap'>{item.kecamatan}</td>
                                        <td className='text-nowrap'>{item.kabupaten}</td>
                                        <td className="text-center text-nowrap">{item.nomor_telp}</td>
                                        <td className="text-center text-nowrap">{item.ibu_kandung}</td>
                                        <td className="text-center text-nowrap">{item.pekerjaan}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </Modal.Body>
                <Modal.Footer></Modal.Footer>
            </Modal>
        );
    }, [laporan, show]);

    return { modal, open, close };
};