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 { getOneCatatan } from '../../actions/catatan';




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

        };
    }

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


    componentDidMount = async () => {

        const { token, query } = this.props;
        const { id } = query;
        const getCatatan = await getOneCatatan(token, id)
        // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
        const pt = getCatatan.data?.isi.pt;
        const catatan = getCatatan.data
        const judul = getCatatan.data.judul

        const tempat = catatan.isi.tempat
        const setTanggal = catatan.isi.setTanggal
        const isi = catatan.isi.isi
        const tanggal = catatan.isi.tanggal
        const isEditTanggal = catatan.isi.isEditTanggal
        const isEditTempat = catatan.isi.isEditTempat
        const simpulan = catatan.isi.simpulan
        const rekomendasi = catatan.isi.rekomendasi

        this.setState({ isi, catatan, judul, pt, tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi, setTanggal });

    };

    render() {
        const { catatan, pt, isEditTanggal, tanggal } = this.state;

        return (
            <page>
                <div className='BA-Header'>
                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
                </div>
                <div className='BA-body pt-3'>
                    <p>
                        Pada hari ini
                        {this.state?.setTanggal === true ?
                            <span > {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(tanggal || this.state?.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
                            <span ><strong>&nbsp;- &nbsp;</strong></span>
                        }
                        bertempat di
                        {this.state?.tempat ?
                            <span className='hhh'>
                                &nbsp;{this.state?.tempat}
                            </span>
                            :
                            <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                        }

                        ,
                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
                        <ol>
                            {catatan?.daftar_kehadiran_peserta?.map((value) =>
                                <li>
                                    {value.nama}
                                </li>)}
                        </ol>
                    </p>
                    <div className='table-a my-4' >
                        <table className=' ml-auto mr-auto'>
                            <thead >
                                <tr>
                                    <th >NO</th>
                                    <th>ASPEK PERBAIKAN</th>
                                    <th >LAPORAN PERBAIKAN</th>
                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.state.isi?.map((isi, index) => (
                                    <tr key={index}>
                                        <td>{index + 1}</td>
                                        <td style={{ width: "30%" }}>
                                                {isi.Aspek_Perbaikan}
                                        </td>
                                        <td style={{ width: "30%" }}>
                                                {isi.Laporan_Perbaikan}
                                        </td>
                                        <td style={{ width: "40%" }}>
                                                {isi.Hasil_Verifikasi}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                    <div className='table-b my-4 pl-4 pr-5' >
                                        <tr>
                                            <td style={{ width: "8%" }}>Simpulan :</td>
                                            <td >
                                                    {this.state.simpulan}
                                            </td>
                                        </tr>
                                    </div>
                                    <div className='table-b my-4 pl-4 pr-5' >
                                        <tr>
                                            <td style={{ width: "8%" }}>Rekomendasi :</td>
                                            <td >
                                                {this.state.rekomendasi}
                                            
                                            </td>
                                        </tr>
                                    </div>
                    <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">
                            {catatan
                                ? catatan?.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>
                </div>
                <div id="footer">
                    <span>{catatan?.judul}</span>
                </div>

            </page>


        );
    }
}
export default ComponentToPrint