import React, { useRef, Component } from 'react';
import { useReactToPrint } from "react-to-print";
import { Row, Col, Button } from "reactstrap";
import Head from 'next/head'
import SignatureCanvas from 'react-signature-canvas'
import ComponentToPrint from "./SuratBA";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import id from 'date-fns/locale/id';


class BeritaAcara extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isEditTempat: false,
            tempat: "[Mohon Diisi]",
            isEditTanggal: false,
            tanggal: "",
            setTanggal: false,
            namaPeserta: [],
            isEditNamaPeserta: false,
            simpulan: "",
            rekomendasi: "",
            isEditTemuanLain: false,
            temuanLain: [],
            memberatkan: [],
            isEditKeberatan: false,
            isEditMeringankan: false,
            meringankan: [],
            sanksi: "[Mohon Diisi]",
            isEditSanksi: false,
            signature: [],
            peserta: [{
                nama: "",
                signature: "",

            }]




        };
    }

    static getInitialProps = async ({ query }) => {
        return { query };
    };
    setDataSuratBA = () => {
        this.props.setDataSuratBA(this.state);
    }
    handleAutoSave = () => {
        this.props.handleAutoSave()
    }
    isEditTempat = () => {
        this.setState({
            isEditTempat: !this.state.isEditTempat,
        })
        this.handleAutoSave()
    }
    isEditTanggal = () => {
        this.setState({
            isEditTanggal: !this.state.isEditTanggal,
        })
        this.handleAutoSave()
    }
    isEditNamaPeserta = () => {
        this.setState({
            isEditNamaPeserta: !this.state.isEditNamaPeserta,
        })
        this.handleAutoSave()

    }
    isEditTemuanLain = () => {
        this.setState({
            isEditTemuanLain: !this.state.isEditTemuanLain,
        })
        this.handleAutoSave()
    }
    isEditKeberatan = () => {
        this.setState({
            isEditKeberatan: !this.state.isEditKeberatan,
        })
        this.handleAutoSave()
    }
    isEditMeringankan = () => {
        this.setState({
            isEditMeringankan: !this.state.isEditMeringankan,
        })
    }
    isEditSanksi = () => {
        this.setState({
            isEditSanksi: !this.state.isEditSanksi,
        })
        this.handleAutoSave()
    }
    updateValueTempat = () => {
        this.setState({
            isEditTempat: false,
            tempat: this.refs.inputTempat.value
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }
    updateValueNamaPeserta = () => {
        const addNamaPeserta = this.refs.inputNamaPeserta.value
        this.setState({
            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }
    updateValueTemuanLain = () => {
        const addTemuanLain = this.refs.inputTemuan.value
        this.setState({
            temuanLain: [...this.state.temuanLain, addTemuanLain]
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }
    updateValueMemringankan = () => {
        const addMeringankan = this.refs.inputMeringankan.value
        this.setState({
            meringankan: [...this.state.meringankan, addMeringankan]
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }
    updateValueMemberatkan = () => {
        const addKeberatan = this.refs.inputMemberatkan.value
        this.setState({
            memberatkan: [...this.state.memberatkan, addKeberatan]
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }
    updateValueSanksi = () => {
        this.setState({
            isEditSanksi: false,
            sanksi: this.refs.inputSanksi.value
        }, this.setDataSuratBA)
        this.handleAutoSave()
    }

    sigPad = []
    clear = () => {
        this.sigPad.clear()
    }
    updateValueSignature = () => {
        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
        this.setState({
            signature: [...this.state.signature, addsig]
        }, this.setDataSuratBA)
    }

    render() {
        const { dataPelanggaran, dataLaporan } = this.props
        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL, signature } = this.state

        return (
            <div>
                <div className=' content-heading border-radius-login'>
                    <span className="btn-radius">
                        <ReactToPrint
                            trigger={() => {
                                // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
                                // to the root node of the returned component as it will be overwritten.
                                return <span>
                                    <Button color className="btn-labeled-4">
                                        <h4 className="p-0 mt-2">Print dan Download</h4>
                                    </Button>
                                </span>
                            }}
                            content={() => this.componentRef}
                        />
                    </span>
                </div>
                <div style={{ display: "none" }}>
                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
                </div>
                <div className='page'>
                    <page>
                        <div className='BA-logo'>
                            <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                        </div>
                        <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
                        {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
                        <div className='body'>
                            <p className='body'>
                                Pada hari ini
                                {isEditTanggal &&
                                    <span>
                                        <DatePicker
                                            selected={tanggal}
                                            onChange={(tanggal) => {
                                                this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
                                            }}
                                            dateFormat="dd/MM/yyyy"
                                            placeholderText="Isi Tanggal"
                                            locale={id}
                                            className="form-control bg-white"
                                        />
                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal} />
                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal}
                                        />
                                    </span>
                                }
                                {setTanggal === true ?
                                    <span onClick={this.isEditTanggal}> {moment(tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal).format("YYYY")},</span> :
                                    <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
                                }
                                &nbsp;bertempat di
                                {isEditTempat ?
                                    <span>
                                        <input type='text'
                                            defaultValue=""
                                            ref="inputTempat" />
                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTempat} />
                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueTempat(), this.handleAutoSave() }} />
                                    </span>
                                    :
                                    <span onClick={this.isEditTempat}>&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='body'>
                                <ol>
                                    {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                                </ol>
                            </div>
                        </div>
                        <p>
                            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='body'>
                            <ol>
                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
                                    {setTanggal === true ?
                                        <span> &nbsp;{moment(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>
                                <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>
                                <li>Temuan Lain:
                                    {isEditTemuanLain ?
                                        <span>
                                            <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueTemuanLain(), this.isEditTemuanLain(), this.handleAutoSave() }} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTemuanLain} />
                                        </span>

                                        : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
                                    <ol type="a">
                                        {temuanLain.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>Hal-hal yang memberatkan, sebagai berikut:
                                    {isEditKeberatan ?
                                        <span>
                                            <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditKeberatan} />
                                        </span>

                                        : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
                                    <ol type="a">
                                        {memberatkan.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>hal-hal yang meringankan, sebagai berikut:
                                    {isEditMeringankan ?
                                        <span>
                                            <input type='text' defaultValue={""} ref="inputMeringankan" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditMeringankan} />
                                        </span>

                                        : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
                                    <ol type="a">
                                        {meringankan.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>
                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa {isEditSanksi ?
                                        <span>
                                            <input type='text'
                                                defaultValue=""
                                                ref="inputSanksi" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSanksi} />
                                        </span> : <span onClick={this.isEditSanksi}>&nbsp;{sanksi}</span>}</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>
                                {dataLaporan
                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
                                        <tr>
                                            <td>{value.nama}</td>
                                            <td>
                                                <img
                                                    style={{ width: "200px" }}
                                                    src={value.ttd.path} />


                                            </td>
                                        </tr>)) : ""}
                            </tbody>
                        </table>
                    </page>
                </div>
            </div >

        );
    }
}
export default BeritaAcara