import { getLaporanLabaRugi } from '@/api/api_laporan';
import { ButtonSubmit } from '@/components/costum/button_submit';
import { Select } from '@/components/costum/Select';
import { LabaRugi } from '@/types';
import { usePage } from '@inertiajs/react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { LaporanNeracaProps } from './neraca';

const OPTION_STATUS_ANGGOTA = [
    {
        label: '1 : Aktif',
        value: '1',
    },
    {
        label: '0 : Non Aktif',
        value: '0',
    },
];

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

    const modalLaporanNeraca = useModalLaporanNeraca();

    const getLaporan = useCallback(async () => {
        const response = await getLaporanLabaRugi(laporan, token as string);
        const responseBody = await response.json();
        console.log(responseBody);
        modalLaporanNeraca.open(responseBody, laporan);
    }, [laporan, modalLaporanNeraca, 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 Laba Rugi</h5>
                        </div>
                        <div className="card-body">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Status</label>
                                <div className="col-md-8">
                                </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>
            {modalLaporanNeraca.modal}
        </>
    );
}

const useModalLaporanNeraca = () => {
    const [show, setShow] = useState<boolean>(false);
    const [laporan, setLaporan] = useState<LabaRugi[]>([]);
    const [filter, setFilter] = useState<LaporanNeracaProps>();

    const open = (data: LabaRugi[], filter: LaporanNeracaProps) => {
        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 Laba Rugi</h6>
                </Modal.Header>
                <Modal.Body className="bg-secondary">
                </Modal.Body>
                <Modal.Footer></Modal.Footer>
            </Modal>
        );
    }, [laporan, show]);

    return { modal, open, close };
};