import { Button, Container, Row, Col } from "react-bootstrap";
import html2pdf from "html2pdf.js";
import dataSource from '../data/data.json';
import PieChartComponent from "./PieChartComponent";
import StackedBarChartComponent from "./StackedBarChartComponent";

function exportToPDF() {
    const element = document.getElementById("report-admin-summary");
    html2pdf().from(element).save("report.pdf");
};

export default function SummaryReport() {
    return (
        <Container className="d-flex align-items-center justify-content-center p-4">
            <Row className="justify-content-center">
                <Col xs='4' className="my-5">
                    <Button variant="primary" onClick={exportToPDF}>
                        Xuất báo cáo
                    </Button>
                </Col>
                <Col xs='12'>
                    <div id="report-admin-summary"
                        style={{
                            color: 'black',
                            fontWeight: 'bold',
                            background: 'white',
                            alignItems: 'center',
                            textAlign: 'center',
                            padding: '50px',
                        }}
                    >
                        <h1 className="my-3">Demo report</h1>
                        <Row>
                            <Col xs='12' className="my-5">
                                <PieChartComponent tasks={dataSource.tasks} />
                            </Col>
                            <Col xs='12' className="my-5">
                                <StackedBarChartComponent tasks={dataSource.tasks} />
                            </Col>
                        </Row>
                    </div>
                </Col>
            </Row>


        </Container>
    );
}