import Datatable from "@/components/Tables/Datatable";
import {
    Button, Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
} 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 { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
import ReactToPrint from "react-to-print";
import ComponentToPrint from "./presensi_print";
import { deleteCatatan } from "../../actions/catatan.js";
import { toast } from "react-toastify";





function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly }) {
    const [dropdownState, setDropdownState] = useState(false);
    const toggleDD = (dd) => {
        setDropdownState(prevState => ({
            ...prevState,
            [dd]: !prevState[dd]
        }));
    };
// const deletedcatatan = async(id)=>{

//             const toastid = toast.loading("Please wait...");
//             const added = await deleteCatatan(id);
//             if (!added) {
//                 toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
//             } else {
//                 toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
//                 // Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
//             }
// }
    return (
        <div className="card b ">
            <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: "40%" }}
                                        >
                                            {/* <span className=" float-left  d-flex mr-2">
                                                <Button className="btn-v3" color >
                                                    <span className="font-color-black">
                                                       Hapus
                                                    </span>
                                                </Button>
                                            </span>
                                            <span className=" d-flex">
                                              <Button className="btn-v3" color>
                                                  <span className="font-color-black">
                                                      Lihat
                                                  </span>
                                              </Button>
                                          </span>
                                            <span className=" float-none d-flex">
                                              
                                                <Button className="btn-v3" color>
                                                    <span className="font-color-black">
                                                        Edit
                                                    </span>
                                                </Button>
                                            </span> */}
                                            <span className=" float-right mt-2">
                                                <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
                                                    toggle={() => toggleDD(`ddSplit${i}`)}  >
                                                    <DropdownToggle
                                                        data-toggle="dropdown"
                                                        tag="span"
                                                    >
                                                        <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
                                                                </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 >
                                                           Hapus
                                                            
                                                            </DropdownItem>
                                                    </DropdownMenu>
                                                </Dropdown>
                                            </span>



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

    )
}

export default TableRiwayatCatatan