import React, { useRef, Component } from 'react';
import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter, FormGroup } from "reactstrap";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import id from 'date-fns/locale/id';
import CopyToClipboard from "react-copy-to-clipboard";
import { getAutoSave } from "@/actions/autosave";
import ContentEditable from 'react-contenteditable'
import { ToastContainer, toast } from "react-toastify";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Swal from 'sweetalert2';
import Datetime from "react-datetime";
import { getOneSanksi } from "@/actions/sanksi";
import { addCatatan } from "../../../actions/catatan";
import { getCsrf } from "../../../actions/security";
class Catatan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            judul: "",
            tanggal: "",
            setTanggal: false,
            isEditTanggal: false,
            isEditTempat: false,
            simpulan: "",
            rekomendasi: "",
            isi: [
                {
                    Aspek_Perbaikan: "",
                    Laporan_Perbaikan: "",
                    Hasil_Verifikasi: ""
                },
            ],
        };
    }
    static getInitialProps = async ({ query }) => {
        return { query };
    };

    componentDidMount = async () => {
        const { query, token } = this.props;
        const idSanksi = query.id;
        const sanksi = await getOneSanksi(token, idSanksi, { all: true });
        const pt = sanksi.data?.laporan.pt;
        this.setState({ sanksi, pt });

    };
    handelSimpan = async (data) => {
        if (this.props?.user?.role.id === 2024) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                confirmButtonColor: "#3e3a8e",
                confirmButtonText: 'Oke'
            })
        } else {
            const getToken = await getCsrf();
            const _csrf = getToken.token;
            const { token, query } = this.props;
            const { id } = query;
            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
            const toastid = toast.loading("Please wait...");
            const added = await addCatatan(token, id, {
                "judul": this.state.judul,
                "isi": this.state,
                "menu": "Perpanjangan Sanksi"
            }, _csrf);
            if (!added) {
                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
            } else {
                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
                Router.push(`/app/perpanjangan-sanksi/detail?id=${id}`);
                // this.setState({ simpan: true })
            }
        }

    };

    setHandleJudul = (e) => {
        this.setState({ judul: e.target.value }, this.setDataCatatan);
    };
    isEditTanggal = () => {
        // this.state.isEditTanggal = !this.state.isEditTanggal
        this.setState({
            isEditTanggal: !this.state.isEditTanggal,
        })
    }

    isEditTempat = () => {
        this.setState({
            isEditTempat: !this.state.isEditTempat,
        })
    }
    handleAspek = (evt, id, field) => {
        const newValue = evt.target.value || evt.target.innerHTML;

        this.setState(prevState => ({
            isi: prevState.isi.map((item, index) =>
                index === id
                    ? { ...item, [field]: newValue }
                    : item
            )
        }));

    };
    addRow = () => {
        this.setState(prevState => ({
            isi: [
                ...prevState.isi,
                {
                    Aspek_Perbaikan: "",
                    Laporan_Perbaikan: "",
                    Hasil_Verifikasi: ""
                }
            ]
        }));
    };
    setDataCatatan = (data) => {
        this.setState({ dataCatatan: data });
    }
    removeRow = (index) => {
        this.setState(prevState => ({
            isi: prevState.isi.filter((_, i) => i !== index)
        }));
    };
    render() {
        const { pt } = this.state
        const { tanggal, isEditTanggal, simpulan, catatan } = this.state
        return (
            <ContentWrapper>
                <Row>
                    <Col lg={12}>
                        <Card body className="card-default">
                            <FormGroup row>
                                <label className="col-md-1  col-form-label">Judul Catatan</label>
                                <div className="col-md-11">

                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
                                </div>
                            </FormGroup>
                            <div className='page  py-5 m-0 '>
                                <div className='BA-Header'>
                                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                                    <h4 >LAPORAN HASIL VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
                                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
                                </div>
                                <div className='BA-body px-5 pt-3'>
                                    <p>
                                        Pada hari ini
                                        <span style={{ textIndent: "0rem" }}>
                                            {isEditTanggal &&
                                                <span style={{ textIndent: "0rem" }}>
                                                    <Datetime
                                                        timeFormat={false}
                                                        inputProps={{ className: "form-control" }}
                                                        value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
                                                        onChange={(tanggal) => {
                                                            this.setState({ tanggal, setTanggal: true })
                                                        }}
                                                        closeOnSelect={true}

                                                    />
                                                    <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>
                                            }
                                        </span>
                                        {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).locale("id").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
                                        {this.state.isEditTempat &&
                                            <span>
                                                <input type='text'
                                                    defaultValue={""}
                                                    ref="inputTempat"
                                                    onChange={() => {
                                                        this.setState({ tempat: this.refs.inputTempat.value })
                                                    }}
                                                />
                                                <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} className='hhh'>
                                                &nbsp;{this.state?.tempat}
                                            </span>
                                            :
                                            <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                                        }

                                        ,
                                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
                                        <ol>
                                            {catatan?.daftar_kehadiran_peserta?.map((value) =>
                                                <li>
                                                    {value.nama}
                                                    {/* <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
                                            onClick={() => {
                                                this.setState({
                                                    selectedPeserta: value._id
                                                })
                                                this.setModalRemovePeserta()
                                            }} /> */}
                                                </li>)}
                                        </ol>
                                    </p>
                                    <div className='table-a my-4 pl-5 pr-5' >
                                        <div className=' d-inline-block'>
                                            <Button color="primary" className="mb-2 float-md-right" onClick={this.addRow}>Tambah Baris</Button>
                                        </div>

                                        <table className=' ml-auto mr-auto'>
                                            <thead >
                                                <tr>
                                                    <th >NO</th>
                                                    <th>ASPEK PERBAIKAN</th>
                                                    <th >LAPORAN PERBAIKAN</th>
                                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {this.state.isi.map((isi, index) => (
                                                    <tr key={index}>
                                                        <td>{index + 1}</td>

                                                        <td style={{ width: "30%" }}>
                                                            <ContentEditable
                                                                html={isi.Aspek_Perbaikan}
                                                                onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}

                                                            />
                                                        </td>

                                                        <td style={{ width: "30%" }}>
                                                            <ContentEditable
                                                                html={isi.Laporan_Perbaikan}
                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}

                                                            />
                                                        </td>

                                                        <td style={{ width: "40%" }}>
                                                            <ContentEditable
                                                                html={isi.Hasil_Verifikasi}
                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}

                                                            />
                                                        </td>
                                                        <td style={{ border: "transparent" }}>
                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
                                                        </td>
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div className='table-b my-4 pl-4 pr-5' >
                                        <tr>
                                            <td style={{ width: "8%" }}>Simpulan&nbsp;:</td>
                                            <td >
                                                <ContentEditable
                                                    html={this.state.simpulan}
                                                    disabled={false}
                                                    onChange={(e) => {
                                                        this.setState({ simpulan: e.target.value });
                                                    }}
                                                    tagName="text"

                                                />
                                            </td>
                                        </tr>
                                    </div>
                                    <div className='table-b my-4 pl-4 pr-5' >
                                        <tr>
                                            <td style={{ width: "8%" }}>Rekomendasi&nbsp;:</td>
                                            <td >
                                                <ContentEditable
                                                    html={this.state.rekomendasi}
                                                    disabled={false}
                                                    onChange={(e) => {
                                                        this.setState({ rekomendasi: e.target.value });
                                                        console.log(e)
                                                    }}
                                                    tagName="text"
                                                />
                                            </td>
                                        </tr>
                                    </div>

                                    <p>

                                    </p>
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col>
                        <footer>
                            <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""}>
                                <span className="font-color-white">
                                    Simpan Catatan
                                </span>
                            </Button>
                        </footer>
                    </Col>

                </Row>

            </ContentWrapper>
        )
    }

}

export default Catatan