import React, { useRef, Component } from 'react';
import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter } from "reactstrap";
import ComponentToPrint from "./Modul_print";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import id from 'date-fns/locale/id';
import CopyToClipboard from "react-copy-to-clipboard";
import { ENV } from '../../env';
import Swal from 'sweetalert2';
import Datetime from "react-datetime";

class Modul extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedPeserta: "",
            copiedd: false,


        };
    };

    handleOpenAlert = () => {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
            confirmButtonColor: "#3e3a8e",
            confirmButtonText: 'Oke'
        })
    };
    CloseCopiedd = () => {

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

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

    render() {
        const { dataLaporan, daftarPeserta } = this.props
        return (
            <div>
                <div className=' content-heading border-radius-login'>
                    <span className="btn-radius">
                        {this.props.role === 2024 ?
                            <Button color className="btn-labeled-4" onClick={this.handleOpenAlert}>
                                <h4 className="p-0 mt-2">Print dan Download</h4>
                            </Button> :
                            <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} />
                </div>
                {ENV === "local" &&
                    <CopyToClipboard
                        text={`http://localhost:3000/signature/modul/${dataLaporan.data?._id}`}
                        options={{ asHtml: true }}
                    >
                        <div>
                            <span className="btn-radius">
                                <Button color id="Popover1" className="ml-0 mt-2 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>

                    </CopyToClipboard>
                }
                {ENV === "production" &&
                    <CopyToClipboard
                        text={`https://sidali.kemdikbud.go.id/signature/modul/${dataLaporan.data?._id}`}
                        options={{ asHtml: true }}
                    >
                        <div>
                            <span className="btn-radius">
                                <Button color id="Popover1" className="ml-0 mt-2 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>

                    </CopyToClipboard>
                }
                {ENV === "development" &&
                    <CopyToClipboard
                        text={`https://dev.sidali.kemdikbud.go.id/signature/modul/${dataLaporan.data?._id}`}
                        options={{ asHtml: true }}
                    >
                        <div>
                            <span className="btn-radius">
                                <Button color id="Popover1" className="ml-0 mt-2 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>

                    </CopyToClipboard>
                }


                <div  >
                    <div className='header-ttd signature-border pt-1 pb-1'>
                        <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
                    </div>
                    <div id="ttd">
                        {daftarPeserta
                            ? daftarPeserta.data?.daftar_kehadiran_peserta?.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>
            </div>
        )
    }
}



export default Modul