import React, { useRef, Component } from 'react';
import { useReactToPrint } from "react-to-print";
import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } 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';
import CopyToClipboard from "react-copy-to-clipboard";
import { getAutoSave } from "@/actions/autosave";



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,
            copied: false,
            setTemuanLain: true,
        };
    }

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

    componentDidMount = async () => {
        const { query, token } = this.props;
        const { id } = query;
        const getDataSave = await getAutoSave({ id, laporan: true });
        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
        this.setState({ autoSaveDataPelanggaran, autoSaveDataSuratBA });
    };
    setDataSuratBA = () => {
        this.props.setDataSuratBA(this.state);
    }
    handleAutoSave = () => {
        this.props.handleAutoSave()
    }
    isEditTempat = () => {
        this.setState({
            isEditTempat: !this.state.isEditTempat,
        }, this.setDataSuratBA, this.handleAutoSave())

    }
    isEditTanggal = () => {
        this.setState({
            isEditTanggal: !this.state.isEditTanggal,
        }, this.setDataSuratBA, this.handleAutoSave())

    }
    isEditNamaPeserta = () => {
        this.setState({
            isEditNamaPeserta: !this.state.isEditNamaPeserta,
        }, this.setDataSuratBA, this.handleAutoSave())


    }
    isEditTemuanLain = () => {
        this.setState({
            isEditTemuanLain: !this.state.isEditTemuanLain,
        }, this.setDataSuratBA, this.handleAutoSave())
    }

    isEditKeberatan = () => {
        this.setState({
            isEditKeberatan: !this.state.isEditKeberatan,
        }, this.setDataSuratBA, this.handleAutoSave())

    }
    isEditMeringankan = () => {
        this.setState({
            isEditMeringankan: !this.state.isEditMeringankan,
        }, this.setDataSuratBA, this.handleAutoSave())
    }
    isEditSanksi = () => {
        this.setState({
            isEditSanksi: !this.state.isEditSanksi,
        }, 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())

    }


    Copied = () => this.setState({
        copied: !this.state.copied
    })

    CloseCopied = () => {

        setTimeout(() => {
            this.setState({
                copied: !this.state.copied
            });
        }, 3000);
    }


    render() {
        const { dataPelanggaran, dataLaporan, dataSuratBA } = this.props
        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, autoSaveDataSuratBA } = 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 || autoSaveDataSuratBA?.setTanggal === true ?
                                    <span onClick={this.isEditTanggal}> {moment(tanggal || autoSaveDataSuratBA?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("YYYY")},</span> :
                                    <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
                                }
                                &nbsp;bertempat di
                                {isEditTempat &&
                                    <span>
                                        <input type='text'
                                            defaultValue=""
                                            ref="inputTempat"
                                            onChange={() => {
                                                this.setState({ tempat: this.refs.inputTempat.value, settempat: true }, this.setDataSuratBA)
                                            }}
                                        />
                                        <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.isEditTempat() }} />
                                    </span>
                                }
                                {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat ?
                                    <span onClick={this.isEditTempat}>
                                        &nbsp;{dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat}
                                    </span>
                                    :
                                    <span onClick={this.isEditTempat}>[Mohon Diisi]</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 || autoSaveDataSuratBA?.setTanggal === true ?
                                        <span> &nbsp;{moment(tanggal || autoSaveDataSuratBA?.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">
                                        {dataSuratBA?.temuanLain.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.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">
                                        {dataSuratBA?.memberatkan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.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">
                                        {dataSuratBA?.meringankan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.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;{dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}</span>}</strong>
                                </li>
                            </ol>
                        </div>
                        <p className=''>
                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                        </p>
                        <p>
                            <CopyToClipboard
                                text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
                                options={{ asHtml: true }}
                            >
                                <div>
                                    <Button color="" id="Popover1" className="btn-labeled-notHover" onClick={() => {
                                        this.setState({
                                            setTemuanLain: !this.state.setTemuanLain
                                        }, this.setDataSuratBA()), this.handleAutoSave(), this.CloseCopied()
                                    }}>
                                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Copy Link Add Peserta</h4>
                                    </Button>
                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
                                        <PopoverHeader>Berhasil Copy Link</PopoverHeader>
                                        <PopoverBody><strong>Link</strong>:https://dev.sidali.kemdikbud.go.id//app/signature/pleno-sanksi/${dataLaporan.data?._id}</PopoverBody>
                                    </Popover>
                                </div>

                            </CopyToClipboard>
                        </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>
                        {/* <div>
                            <div id="ttd-header" className='text-center signature-border'>
                                <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
                            </div>
                            <div id="ttd">

                                {dataLaporan
                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
                                        <div className='ttd-div'>
                                            <img
                                                className='sign-ttd'
                                                src={value.ttd.path} />
                                            <div className='sign-nama font-color-black'>{value.nama}</div>
                                        </div>
                                    )) : ""}
                            </div>
                        </div> */}


                    </page>
                </div>
            </div >

        );
    }
}
export default BeritaAcara