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";
import ContentEditable from 'react-contenteditable'



class BeritaAcara extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isEditTempat: false,
            tempat: <strong>[Mohon Diisi]</strong>,
            isEditTanggal: false,
            tanggal: "",
            setTanggal: false,
            isEditNamaPeserta: false,
            isEditTemuanLain: false,
            temuanLain: [],
            memberatkan: [],
            isEditKeberatan: false,
            isEditMeringankan: false,
            meringankan: [],
            sanksi: "[Mohon Diisi]",
            isEditSanksi: false,
            copied: false,
            setmeState: true,
            descPelanggaran: [],
        };
    }

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

    componentDidMount = async () => {
        const { query, token, dataPelanggaran } = this.props;
        const { id } = query;
        const getDataSave = await getAutoSave({ id, laporan: true });
        const autosaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        this.setState(autosaveDataSuratBA)
    };

    componentDidUpdate = (prevProps) => {
        const { dataPelanggaran } = this.state;
        if (prevProps.dataPelanggaran != this.state.dataPelanggaran) {
            const descPelanggaran = {}
            dataPelanggaran?.forEach(e => {
                descPelanggaran[e._id] = {
                    simpulan: 'simpulan',
                    rekomendasi: 'rekomendasi'
                }
            });
        }
    }

    updateValueSimpulan = (evt, id) => {
        const descPelanggaran = this.state.descPelanggaran
        this.state.descPelanggaran = {
            ...descPelanggaran, [id]: {
                ...descPelanggaran[id], simpulan: evt.target.value
            }
        }
        this.handleAutoSave()
        // this.setState((prevState) => ({
        //     ...prevState, descPelanggaran: {
        //         ...prevState.descPelanggaran, [id]: {
        //             ...prevState.descPelanggaran[id], simpulan: evt.target.value
        //         }
        //     }
        // }), this.handleAutoSave)
    }
    updateValueRekomendasi = (evt, id) => {
        const descPelanggaran = this.state.descPelanggaran
        this.state.descPelanggaran = {
            ...descPelanggaran, [id]: {
                ...descPelanggaran[id], rekomendasi: evt.target.value
            }
        }
        this.handleAutoSave()
        // this.setState((prevState) => ({
        //     ...prevState, descPelanggaran: {
        //         ...prevState.descPelanggaran, [id]: {
        //             ...prevState.descPelanggaran[id], rekomendasi: evt.target.value
        //         }
        //     }
        // }), this.handleAutoSave)
    }

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

    }

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

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

    }
    isEditMeringankan = () => {
        this.state.isEditMeringankan = !this.state.isEditMeringankan
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditMeringankan: !this.state.isEditMeringankan,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }
    isEditSanksi = () => {
        this.state.isEditSanksi = !this.state.isEditSanksi
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditSanksi: !this.state.isEditSanksi,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }
    updateValueTemuanLain = () => {
        const addTemuanLain = this.refs.inputTemuan.value
        this.state.temuanLain.push(addTemuanLain)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()

    }
    updateValueMemringankan = () => {
        const addMeringankan = this.refs.inputMeringankan.value
        this.state.meringankan.push(addMeringankan)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()

    }
    updateValueMemberatkan = () => {
        const addKeberatan = this.refs.inputMemberatkan.value
        this.state.memberatkan.push(addKeberatan)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()
    }


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

    CloseCopied = () => {

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

    render() {
        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
        const { descPelanggaran, tanggal, setTanggal } = this.state
        return (
            <div>
                <div className=' content-heading border-radius-login'>
                    <span className="btn-radius">
                        <ReactToPrint
                            trigger={() => {
                                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


                                {dataSuratBA?.isEditTanggal &&
                                    <span>
                                        <DatePicker
                                            selected={tanggal ? new Date(tanggal) : 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 || this.state?.setTanggal === true ?
                                    <span onClick={this.isEditTanggal}> {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).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
                                    <span onClick={this.isEditTanggal}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                                }



                                &nbsp;bertempat di
                                {dataSuratBA?.isEditTempat &&
                                    <span>
                                        <input type='text'
                                            defaultValue={""}
                                            ref="inputTempat"
                                            onChange={() => {
                                                this.setState({ tempat: this.refs.inputTempat.value }, 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>
                                }
                                {this.state?.tempat ?
                                    <span onClick={this.isEditTempat}>
                                        &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
                                    </span>
                                    :
                                    <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></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 || this.state?.setTanggal === true ?
                                        <span> &nbsp;{moment(tanggal || 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>
                                <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?.data?.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
                                                        html={descPelanggaran[e._id]?.simpulan || ""}
                                                        disabled={false}
                                                        onChange={(evt) => {
                                                            this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()

                                                        }}
                                                    />
                                                </td>
                                                <td>
                                                    <ContentEditable
                                                        html={descPelanggaran[e._id]?.rekomendasi || ""}
                                                        disabled={false}
                                                        onChange={(evt) => {
                                                            this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()

                                                        }}
                                                    />
                                                </td>

                                            </tr>

                                        ))}
                                    </tbody>
                                </table>
                                <li>Temuan Lain:
                                    {this.props.dataSuratBA?.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()
                                            }} />
                                            <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>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>Hal-hal yang memberatkan, sebagai berikut:
                                    {this.props.dataSuratBA?.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>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>hal-hal yang meringankan, sebagai berikut:
                                    {this.props.dataSuratBA?.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>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>
                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
                                        {dataSuratBA?.isEditSanksi &&
                                            <span>
                                                <input type='text'
                                                    defaultValue=""
                                                    ref="inputsanksi"
                                                    onChange={() => {
                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
                                                    }}
                                                />
                                                <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.isEditSanksi() }} />
                                            </span>
                                        }
                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
                                            <span onClick={this.isEditSanksi}>
                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
                                            </span>
                                            :
                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</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>
                                    <span className="btn-radius">
                                        <Button color id="Popover1" className="btn-labeled-3" onClick={() => {
                                            this.CloseCopied()
                                        }} >

                                            <h4 className="p-0 mt-2 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h4>
                                        </Button>
                                    </span>
                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
                                    </Popover>
                                </div>

                            </CopyToClipboard>
                        </p>
                        {/* <table className='demo'>
                            <tbody>

                                <tr>
                                    <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                                </tr>
                                <tr className='trdemo'>
                                    <th className='trdemo'>No</th>
                                    <th className='trdemo'>Nama</th>
                                    <th className='trdemo'>Tanda Tangan</th>
                                </tr>
                                {dataLaporan
                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
                                        <tr>
                                            <td className='trdemo'>{index + 1}</td>
                                            <td className=' tddemo'>{value.nama}</td>
                                            <td className='tddemo'>
                                                <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> */}
                        <div  >
                            <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">
                                {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>


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

        );
    }
}
export default BeritaAcara