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";
// import ReactSummernote from 'react-summernote';
// import SummerNote from "./SummerNote";
// import rtf2html from "../../../components/Main/trf2html";

// SummerNote.ImportCode();




class NewFile extends Component {
  constructor(props) {
    
    super(props);
    this.editor = React.createRef();
    this.state = {
      // editorState: EditorState.createEmpty(),
      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])
    })
  }
  onChange(e) {
    //$('span[style*="mso-ignore"]').remove()
    //let img = $('img[src*="file://"]').attr('loading',true);
    // console.log(e);
  }
  onImagePasteFromWord($imgs) {
    console.log("onImagePasteFromWord", $imgs);
  }
  onPaste(e) {
    //console.log('--------- onPaste --------', e)

    let items = e.originalEvent.clipboardData.items;
    let files = e.originalEvent.clipboardData.files;

    for (let i = 0; i < files.length; i++) {
      return e.preventDefault();
    }

    //console.log('---------- items -------------', items)
    //console.log('---------- files -------------', files)

    for (let i = 0; i < items.length; i++) {
      //console.log('---------- item -------------', items[i])
      if (items[i].type.indexOf("rtf") > -1) {
        items[i].getAsString(function (rtf) {
          // const doc = rtf2html(rtf);
          //const meta = doc.metadata();
          //console.log(doc)
        //   doc
        //     .render()
        //     .then(function (htmlElements) {
        //       var imgs = [];
        //       //console.log('meta', meta);
        //       //console.log('htmlElements', htmlElements);
        //       htmlElements.forEach($html => {
        //         $html.find('img[src*="data:image"]').each((i, el) => {
        //           imgs.push(el);
        //         });
        //         //$('#test').append($html)
        //       });
        //       //console.log(imgs)
        //       setTimeout(() => {
        //         //console.log(imgs)
        //         $("img[loading]").each((i, el) => {
        //           if (imgs[i]) el.src = imgs[i].src;
        //         });
        //       }, 0);
        //     })
        //     .catch(error => console.error(error));
        });
      }
    }

  }

  render() {
    const { editorState } = this.state;

    return (
      <ContentWrapper>
                <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='editor'
                destroy={false}
                // value={htmldata}
                options={{
                  // lang: "zh-TW",
                  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", ["jTable"]],
                    ["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',
                  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={this.onEditorStateChange}
                onImageUpload={this.onImageUpload}
                onImagePasteFromWord={this.onImagePasteFromWord}
                onPaste={this.onPaste}
                onInit={e => console.log(`Using jquery version ${$().jquery}`)}
                ref={this.editor}
              /> */}
              <SummerNote options={{
          height: 350,
          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"]],
          ],
        }}/>
              <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</span>

                            {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</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);