import React, { Component } from "react";
import Router from "next/router";
import { connect } from "react-redux";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
// import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
// import 'draft-js/dist/Draft.css';
import dynamic from 'next/dynamic';
const Editor = dynamic(
    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
    { ssr: false })
import draftToHtml from 'draftjs-to-html';
import pdfMake from "pdfmake/build/pdfmake";
import StateToPdfMake from "draft-js-export-pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import { toast } from "react-toastify";
import { addCatatan } from "../../../actions/catatan";
import { getCsrf } from "../../../actions/security";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import SummerNote from "../../../components/Extras/summernote";





class NewFile extends Component {
    constructor(props) {
        super(props);
        this.editor = React.createRef();
        this.state = {
            editorState: "<p>dfgergergr</p><p>hgrfhfghf</p><p>trhrhrt</p>",
            copiedd: false,
            judul: "",
            simpan: false,
            menu: "",
        };
    }

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

    };


    componentDidMount() {
        const { query } = this.props;
        const { id } = query;
    }

    // onEditorStateChange = (editorState) => {
    //     this.setState({
    //         editorState,
    //     });
    // };

    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.editorState,
                "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 })
            }
        }

    };
    handleGeneratePDF = () => {
        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
        console.log(rawContent)
        const stateToPdfMake = new StateToPdfMake(rawContent);
        console.log(stateToPdfMake.generate());

        pdfMake.createPdf(stateToPdfMake.generate()).download();
    };
    setHandleJudul = (e) => {
        this.setState({ judul: e.target.value });
    };
    CloseCopiedd = () => {

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

    Copiedd = () => this.setState({
        copiedd: !this.state.copiedd
    })

    // convertFileToBase64(file) {
    //     return new Promise((resolve, reject) => {
    //         const reader = new FileReader()
    //         reader.readAsDataURL(file)
    //         reader.onload = () => resolve(reader.result)
    //         reader.onerror = () => reject(console.log('FileReader Error: ', error))
    //     })

    // }
    // onImageUpload = (f, cb, e) => {


    //     let file = f
    //     if (file.length) {
    //         file = f[0]
    //     }
    //     this.convertFileToBase64(file).then(src => {
    //         const $image = $('<img>').attr('src', src).wrap('div')
    //         this.editor.current.insertNode($image[0])
    //     })
    // }

    render() {
        const { editorState } = this.state;
        return (
            <ContentWrapper>
                <meta charset="UTF-8" />
                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
                <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet" />
                <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
                <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>

                            <SummerNote
                                id='editor1'
                                destroy={false}
                                // value={editorState}
                                options={{
                                    lang: "eng",
                                    height: 800,
                                    dialogsInBody: true,
                                    toolbar: [
                                        ["style", ["style", "customStyle", "copyFormatting"]],
                                        ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
                                        ["fontname", ["fontname", "customFont"]],
                                        ["fontsize", ["fontsizeInput"]],
                                        ['color', ['forecolor', 'backcolor']],
                                        ["para", ["ul", "ol", "listStyles", "paragraph"]],
                                        ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
                                        ["tableRow", ["jRowHeight"]],
                                        ["tableCol", ["jColWidth"]],
                                        ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
                                        ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
                                        ["comment", ["editPopover", "removePopover"]],
                                        // ["view", ["fullscreen", "codeview", "help"]],
                                    ],

                                    canViewClasslist: true,
                                    tableClassName: 'jtable table-bordered color-black',
                                    customFont: {
                                        fontNames: [
                                            'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
                                            { name: '新細明體', value: '新細明體, serif' },
                                            { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
                                            { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
                                        ]
                                    },
                                }}
                                onChange={(editorState) => {
                                    this.setState({
                                        editorState,
                                    });
                                }}
                            // onImageUpload={this.onImageUpload}
                            // ref={this.editor}

                            />
                            <br />

                            <Row>
                                <Col>
                                    {this.state.simpan === true ?
                                        (
                                            <div>
                                                <span className="btn-radius">
                                                    <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
                                                        this.CloseCopiedd()
                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen Berita Acara</span>

                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</h5> */}
                                                    </Button>
                                                </span>
                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
                                                </Popover>
                                            </div>
                                        ) :
                                        (
                                            <div>
                                                <span className=" text-danger">
                                                    *Klik tombol &#39;Simpan&#39; untuk mendapatkan link presensi
                                                </span>

                                            </div>
                                        )

                                    }

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

                        </Card>
                    </Col>

                </Row>
            </ContentWrapper>
        );
    }
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(NewFile);