import Datatable from "@/components/Tables/Datatable";
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
import Link from "next/link";
import moment from "moment";
import { ENV } from '../../env.js';
import CopyToClipboard from "react-copy-to-clipboard";
import { useState } from "react";
import { deleteCatatan } from "../../actions/catatan.js";
import { toast } from "react-toastify";
import { useSelector } from "react-redux";
import Router from "next/router";






function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly, role }) {
    const [dropdownState, setDropdownState] = useState(false);
    const [seledtedID, setSelectedID] = useState("")
    const [modalIsOpen, setModalIsOpen] = useState(false)
    const token = useSelector((state) => state.token)

    const toggleDD = (dd) => {
        setDropdownState(prevState => ({
            ...prevState,
            [dd]: !prevState[dd]
        }));
    };
    const setmodal = (id) => {
        setModalIsOpen(!modalIsOpen)
        setSelectedID(id)
    }
    return (
        <div className="card b ">
            <Modal isOpen={modalIsOpen} >
                <ModalBody>Apakah Anda yakin akan menghapus catatan ini?</ModalBody>
                <ModalFooter>

                    <Button color className="btn-login" onClick={async () => {
                        if (role === 2071) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                                confirmButtonColor: "#3e3a8e",
                                confirmButtonText: 'Oke'
                            })
                        } else {

                            await toast.promise(deleteCatatan(token, seledtedID), {
                                pending: "Loading",
                                success: "Success",
                                error: "Error",
                            });
                            Router.push(`/app/perpanjangan-sanksi/detail?id=${query.id}`);
                            setModalIsOpen(false)
                        }
                    }}>
                        <span className="font-color-white">Ya</span>
                    </Button>
                    <Button color className="btn-v2" onClick={setmodal}>
                        Tidak
                    </Button>
                </ModalFooter>
            </Modal>
            <div className=" card-header">
                <div className=" card-title">Riwayat Catatan</div>
            </div>
            <div className=" card-body">
                <div className="margin-right-auto float-right">
                    <Link
                        href={{
                            pathname: newFilePage,
                            query: { id: query?.id },
                        }}
                    >
                        <Button className="btn-login" color>
                            <img className="icon-laporan-baru" src="/static/img/icon-laporan-baru.png"></img>
                            <span className="font-color-white m-2">
                                Tambah Catatan
                            </span>
                        </Button>
                    </Link>
                </div>
                <Datatable options={{
                    responsive: false, ordering: true,
                    // paging: false,
                    searching: false,
                    // ordering: false,
                    // info: false,
                }}>
                    <table className="table w-100" data-order='[[0, "desc"]]'>
                        <thead>
                            <tr>
                                <th>Tanggal dibuat</th>
                                <th>Nama File</th>
                                <th>Terakhir diedit</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {listData?.length
                                ? listData.map((data, i) => (
                                    <tr>
                                        <td>{moment(data.createdAt).format("D MMMM YYYY")}</td>
                                        <td>
                                            {data.judul}
                                        </td>
                                        <td>{moment(data.updatedAt).format("D MMMM YYYY")}</td>
                                        <td
                                        // style={{ width: "30%" }}
                                        >
                                            <span className="">
                                                <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
                                                    toggle={() => toggleDD(`ddSplit${i}`)}  >
                                                    <DropdownToggle
                                                        data-toggle="dropdown"
                                                        tag="span"
                                                    >
                                                        <Button color className="btn-v3">
                                                            Info
                                                        </Button>
                                                        {/* <em className="fas fa-ellipsis-v" /> */}
                                                    </DropdownToggle>
                                                    <DropdownMenu>
                                                        {ENV === "local" &&
                                                            <CopyToClipboard
                                                                text={`http://localhost:3000/signature/letter/${data?._id}`}
                                                                options={{ asHtml: true }}
                                                            ><DropdownItem>
                                                                    Link Dokumen Berita Acara
                                                                </DropdownItem>
                                                            </CopyToClipboard>
                                                        }
                                                        {ENV === "development" &&
                                                            <CopyToClipboard
                                                                text={`http://dev.sidali.kemdikbud.go.id/signature/letter/${data?._id}`}
                                                                options={{ asHtml: true }}
                                                            ><DropdownItem>
                                                                    Link Dokumen Berita Acara
                                                                </DropdownItem>
                                                            </CopyToClipboard>
                                                        }
                                                        <Link
                                                            href={{
                                                                pathname: readOnly,
                                                                query: { id: data?._id },
                                                            }}

                                                        >
                                                            <DropdownItem>
                                                                <span className=" font-color-black">Lihat</span>
                                                            </DropdownItem>
                                                        </Link>
                                                        <Link
                                                            href={{
                                                                pathname: editFilePage,
                                                                query: { id: data?._id },
                                                            }}

                                                        ><DropdownItem>
                                                                <span className=" font-color-black">Edit</span>
                                                            </DropdownItem>
                                                        </Link>
                                                        <DropdownItem onClick={() => { setmodal(data._id) }}>
                                                            <span  >
                                                                Hapus
                                                            </span>

                                                        </DropdownItem>
                                                    </DropdownMenu>
                                                </Dropdown>
                                            </span>



                                        </td>
                                    </tr>
                                )) : (
                                    ""
                                )}
                        </tbody>
                    </table>
                </Datatable>
            </div>
        </div>

    )
}
export default TableRiwayatCatatan;