import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";
import React, { Component } from "react";
import { getLog2 } from "@/actions/log";
import { connect } from "react-redux";

class TableRiwayatt extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataRiwayat: "",
        };
    }
    componentDidMount = async () => {
        const { token } = this.props;
        const dataRiwayat = await getLog2(this.props.token);
        this.setState({ dataRiwayat });
    }

    render() {
        // console.log(this.state.dataRiwayat.data?.map(e => e.id))
        return (
            <div className="card b ">
                <div style={{ height: 500 }} className="card-body card-over">
                    {this.state.dataRiwayat && (
                        <Datatable options={{
                            responsive: false, ordering: false, keys: false, lengthChange: false, searching: false, aLengthMenu: [500], paging: false, scrollX: true, scrollY: "370px",
                            bordered: true
                        }}>
                            <table className="table w-100" data-order='[[3, "desc"]]'>
                                <thead>
                                    <tr>
                                        <th>Timestamp</th>
                                        <th>Username</th>
                                        <th>IPv4</th>
                                        <th>Menu</th>
                                        <th>Deskripsi</th>
                                        {/* <th>Created</th> */}
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
                                        <tr>
                                            <td style={{ width: 175 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, HH:mm"))}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 130 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.user?.nama}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 120 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.ipv4}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 150 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.menu}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 350 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.aktivitas}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    ))}

                                </tbody>
                            </table>
                        </Datatable>
                    )}
                </div>
            </div >
        );
    }
}
const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(TableRiwayatt);