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




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

        };
    }

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

    componentDidMount = async () => {
        const { query, token } = this.props;

        const dataSanksi = await getOneSanksi(token, query.id);

        const id = dataSanksi.data.laporan._id;
        const dataLaporan = await getOneLaporan(token, id);
        const getDataSave = await getAutoSave({ id, laporan: true });
        const getDataSuratBAFromAuto = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        const getDataPelanggaranFromAuto = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
        this.setState({ dataPelanggaran: getDataPelanggaranFromAuto })
        this.setState(getDataSuratBAFromAuto)

        this.setState({ dataSanksi, dataLaporan });
    }

    render() {
        const { dataLaporan } = 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 RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h3>
                    {this.state.dataSanksi.data && (<h3 className='text-uppercase' >{this.state.dataSanksi.data.laporan.pt.nama}</h3>)}
                </div>
                <div className='BA-body pt-3'>
                    <p>
                        Pada hari ini
                        {this.state?.setTanggal === true ?
                            <span > {moment(this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(this.state?.tanggal).format("YYYY")},</span> :
                            <span> &nbsp;- &nbsp;</span>
                        }
                        bertempat di
                        {this.state?.tempat ?
                            <span>
                                &nbsp;{this.state?.tempat}
                            </span>
                            :
                            <span>-</span>
                        }
                        ,
                        telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, yang dihadiri oleh:
                        {dataLaporan?.data ? <ol>

                            {/* {this.state.dataSanksi?.data?.laporan?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)} */}
                            {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}



                        </ol>
                            : "Tidak ada peserta"}
                    </p>
                    <p>
                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, disampaikan sebagai berikut:

                        <ol className='mt-3'>
                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, tanggal
                                {this.state?.setTanggal_2 === true ? (

                                    this.state?.setTanggal_2 === true ?
                                        <span > {moment(this.state?.tanggal_2).locale("id").format("dddd")}, tanggal&nbsp;{moment(this.state?.tanggal_2).format("D")}&nbsp; bulan &nbsp;{moment(this.state?.tanggal_2).format("MMMM")} tahun &nbsp;{moment(this.state?.tanggal_2).format("YYYY")},</span> :
                                        <span> &nbsp;- &nbsp;</span>
                                )
                                    : (
                                        this.state?.setTanggal === true ?
                                            <span> &nbsp;{moment(this.state?.tanggal).format("DD-MM-YYYY")}</span>
                                            :
                                            <span> &nbsp;....... &nbsp;</span>
                                    )
                                }

                            </li>
                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                        </ol>
                    </p>
                    <div className='table-a my-4' >
                        <table >
                            <thead>
                                <tr>
                                    <th rowspan="2">NO</th>
                                    <th rowspan="2">NAMA DAN IZIN PRODI</th>
                                    <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
                                    <th rowspan="2">SIMPULAN</th>
                                    <th rowspan="2">REKOMENDASI</th>
                                </tr>
                                <tr>
                                    <th>PASAL</th>
                                    <th>BUTIR PELANGGARAN</th>
                                    <th>DESKRIPSI PELANGGARAN</th>
                                </tr>
                            </thead>
                            <tbody>
                                {dataLaporan?.data?.sanksi.pelanggaran.map((e, i) => (
                                    <tr key={e._id}>
                                        <td>{++i}</td>
                                        {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
                                        <td>{e.pasal}</td>
                                        <td>{e.butir_pelanggaran}</td>
                                        <td>{e.pelanggaran}</td>
                                        {this.state?.descPelanggaran ?
                                            (
                                                <td style={{ minWidth: "215px" }} >{"-" || this.state.descPelanggaran[e?._id]?.simpulan
                                                }</td>
                                            ) :
                                            (<td style={{ minWidth: "215px" }}>
                                                -
                                            </td>)
                                        }
                                        <td style={{ minWidth: "215px" }}>{`Sanksi Administratif berupa ${this.state?.sanksi ? this.state?.sanksi : "-"}` || ""}</td>
                                    </tr>
                                ))}
                                {/* {this.state.dataPelanggaran?.data?.map((e, i) => (
                                    <tr key={e._id}>
                                        <td>{++i}</td>
                                        {this.state.dataSanksi.data && (<td className='BA-header'>{this.state.dataSanksi.data.laporan.pt.nama}</td>)}
                                        <td>{e.pasal}</td>
                                        <td>{e.butir_pelanggaran}</td>
                                        <td>{e.pelanggaran}</td>
                                        {this.state?.descPelanggaran ?
                                            (
                                                <td style={{ minWidth: "215px" }} >{"-" || this.state.descPelanggaran[e?._id]?.simpulan
                                                }</td>
                                            ) :
                                            (<td style={{ minWidth: "215px" }}>
                                                -
                                            </td>)
                                        }

                                        <td style={{ minWidth: "215px" }}>{`Sanksi Administratif berupa ${this.state?.sanksi ? this.state?.sanksi : ""}` || ""}</td>
                                    </tr>

                                ))} */}
                            </tbody>
                        </table>
                    </div>
                    <p>
                        <ol start="3">
                            <li>Temuan Lain:
                                <ol type="a">
                                    {this.state?.temuanLain ?
                                        <span>{this.state?.temuanLain.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>Hal-hal yang memberatkan, sebagai berikut:
                                <ol type="a">
                                    {this.state?.memberatkan ?
                                        <span>{this.state?.memberatkan.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>hal-hal yang meringankan, sebagai berikut:
                                <ol type="a">
                                    {this.state?.meringankan ?
                                        <span>{this.state?.meringankan.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>
                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
                                    {this.state?.sanksi ?
                                        <span>{this.state?.sanksi}</span>
                                        : "Belum Diisi"}
                                    ”.</strong>
                            </li>
                        </ol>
                    </p>
                    <p>
                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                    </p>
                    <div className='mt-5'>
                        <div className='header-ttd signature-border pt-1 pb-1'>
                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
                        </div>
                        <div id="ttd">
                            {/* {this.state.dataSanksi?.data
                                ? this.state.dataSanksi.data?.laporan.peserta_penetapan_sanksi?.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>
                                )) : ""} */}

                            {dataLaporan
                                ? dataLaporan.data?.peserta_penetapan_sanksi?.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>*LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT …………. – …bulan&tahun…</span>
                </div>
            </page>
        )
    }

}
export default ComponentBA