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')



class ComponentToPrint extends React.Component {
    formData = {}
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},
            tempat: "[Mohon Diisi]",
            isEditMode: false,
            temuanLain: [],
            memberatkan: [],
            formData: null,
            meringankan: [],
            namaPeserta: [{ nama: "", ttd: [] }]
        };
    }

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


    componentDidMount = async () => {
        const { query, token } = this.props;
        const { id } = query;
        const dataLaporan = await getOneLaporan(token, id);
        this.setState({ dataLaporan });
    };
    changeEditMode = () => {
        this.setState({
            isEditMode: !this.state.isEditMode,
        })
    }
    updateValueTempat = () => {
        this.setState({
            isEditMode: false,
            tempat: this.refs.inputTempat.value
        })
    }
    handleTemuanLain = (e) => {
        const addTemuanLain = this.refs.inputTemuan.value
        this.setState({
            temuanLain: [...this.state.temuanLain, addTemuanLain]
        }, this.setformData)
    }
    handleMemberatkan = (e) => {
        const addMemberatkan = this.refs.inputMemberatkan.value
        this.setState({
            memberatkan: [...this.state.memberatkan, addMemberatkan]
        }, this.setformData)
    }
    handleMeringankan = (e) => {
        const addMeringankan = this.refs.inputMeringankan.value
        this.setState({
            meringankan: [...this.state.meringankan, addMeringankan]
        }, this.setformData)
    }
    setNamaPeserta = () => {
        const addNamaPeserta = this.refs.inputNama.value
        this.setState({
            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
        })
    }

    setformData = (data) => {
        this.setState({
            formData: this.state
        })
    }



    render() {
        const { dataLaporan, tempat, isEditMode, temuanLain, formData, memberatkan, meringankan, namaPeserta } = this.state
        const { dataPelanggaran } = this.props
        return (
            <div className='BA-div' >
                <div className='BA-logo'>
                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                </div>
                <div>
                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
                    <div className='BA-body'>
                        <p className='BA-body'>
                            Pada hari ini <span>{moment(dataLaporan.createAt).locale("id").format("dddd")}</span>, tanggal&nbsp;{moment(dataLaporan.createAt).format("D")}&nbsp; bulan &nbsp;{moment(dataLaporan.createAt).format("MMMM")} tahun &nbsp;{moment(dataLaporan.createAt).format("YYYY")},
                            bertempat di
                            {isEditMode ?
                                <span>
                                    <input type='text'
                                        defaultValue=""
                                        ref="inputTempat" />
                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueTempat} />
                                </span>
                                :
                                <span color='danger' onClick={this.changeEditMode}>&nbsp;{tempat}</span>
                            }
                            ,
                            telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
                        </p>
                        <div className='BA-body'>
                            <ol>
                                <li contenteditable='true'>Isi name</li>
                                <li contenteditable='true'>Isi nama</li>
                                <li contenteditable='true'>Isi nama</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div className='BA-body'>
                    <p className='BA-body'>
                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
                    </p>
                    <div className='BA-body'>
                        <ol>
                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi …….., tanggal ……..;</li>
                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                            {/* <div style={{ overflow: "auto" }}> */}
                            <table className='table-a'>
                                <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>
                                    {dataPelanggaran
                                        ? dataPelanggaran.map((e, i) => (
                                            <tr key={e._id}>
                                                <td>{++i}</td>
                                                {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
                                                <td>{e.pasal}</td>
                                                <td>{e.butir_pelanggaran}</td>
                                                <td>{e.pelanggaran}</td>
                                                <td contenteditable='true'>[Mohon Diisi]</td>
                                                <td contenteditable='true'>[Mohon Diisi]</td>
                                            </tr>

                                        ))
                                        : ""}
                                </tbody>
                            </table>
                            {/* </div> */}

                            <li>Temuan Lain:
                                {isEditMode ?
                                    <span>
                                        <input type='text' defaultValue={""} ref="inputTemuan" />
                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleTemuanLain} />
                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
                                    </span>

                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                <ol type="a">
                                    {temuanLain.map((value) => <li>{value}</li>)}
                                </ol>
                            </li>
                            <li>Hal-hal yang memberatkan, sebagai berikut:
                                {isEditMode ?
                                    <span>
                                        <input type='text' defaultValue={""} ref="inputMemberatkan" />
                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMemberatkan} />
                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
                                    </span>

                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                <ol type="a">
                                    {memberatkan.map((value) => <li>{value}</li>)}
                                </ol>
                            </li>
                            <li>hal-hal yang meringankan, sebagai berikut:
                                {isEditMode ?
                                    <span>
                                        <input type='text' defaultValue={""} ref="inputMeringankan" />
                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMeringankan} />
                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
                                    </span>

                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                <ol type="a">
                                    {meringankan.map((value) => <li>{value}</li>)}
                                </ol>
                            </li>
                            <li>
                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa …………………………..”.</strong>
                            </li>
                        </ol>
                    </div>
                    <p className='BA-body'>
                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                    </p>
                    <table className='demo'>
                        <tbody>
                            <tr>
                                <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                            </tr>
                            <tr>
                                <td contenteditable='true' onChange={this.setNamaPeserta} ref="inputNama">Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td contenteditable='true'>Isi Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="footer">
                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
                    {/* <span class="custom-footer-page-number">Number: </span> */}
                </div>

            </div>

        );
    }
}
export default ComponentToPrint