import React, { Component } from 'react';
import SignatureCanvas from 'react-signature-canvas'
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
import { connect } from "react-redux";
import moment from "moment";
import 'moment/locale/id'
moment.locale('id')
import { getAutoSave } from "@/actions/autosave";
import { getDaftarHadirPeserta } from '../../actions/public';




class ComponentToPrint extends React.Component {
    formData = {}
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},

        };
    }

    static getInitialProps = async ({ query }) => {
        return { query };
    };


    componentDidMount = async () => {
        const { query, token } = this.props;
        const { id } = query;
        const dataLaporan = await getOneLaporan(token, id);
        const daftarPeserta = await getDaftarHadirPeserta(token, id)

        this.setState({ dataLaporan, daftarPeserta });

    };

    render() {
        const { daftarPeserta} = this.state
        return (
            <page>
                
                    <div className='mt-5'>
                        <div className='header-ttd signature-border pt-1 pb-1'>
                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
                        </div>
                        <div id="ttd">
                            {daftarPeserta
                                ?daftarPeserta.data?.daftar_kehadiran_peserta?.map((value) => (
                                    <div className='ttd-div'>
                                        <div className='sign-ttd'>
                                            <img
                                                className='sign-ttd'
                                                src={value.ttd.path} />
                                        </div>
                                        <div className='sign-nama'>
                                            <text>
                                                {value.nama}
                                            </text>
                                        </div>
                                    </div>
                                )) : ""}
                        </div>
                    </div>

            </page>


        );
    }
}
export default ComponentToPrint