import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { getLog } from "@/actions/log";
import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col, FormGroup } from "reactstrap";
import Timeline from "@/components/Main/Timeline";
import { getOnePT } from "@/actions/PT";
import { connect } from "react-redux";
import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
import DetailLaporan from "@/components/Main/DetailLaporan";
import Link from "next/link";
import Loader from "@/components/Common/Loader";
import DetailPT from "@/components/Main/DetailPT";
import moment from "moment";
import Datatable from "@/components/Tables/Datatable";
import classnames from "classnames";
import BeritaAcara_Bypass from "../../../components/BypassII/BeritaAcara";
import { UploadSurat_Bypass } from "../../../components/BypassII/UploadSurat";
import { TablePenetapanSanksi_Bypass } from "../../../components/BypassII/TablePenetapanSanksi";


const stepNavitemStyle = {
    backgroundColor: "#fcfcfc",
};

class bypassIIDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeStep: "1",

            log: {},
            detailLaporanPt: {},
            pelaporan: {},
            pt: {},
        };
    }

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

    componentDidMount = async () => {
        const { query, token } = this.props;
        const ptId = query.ptId;
        const pelaporan = await getPelaporan(token, { pt_id: ptId, all: true, aktif: true });
        const pt = await getOnePT(token, ptId);
        this.setState({ pelaporan, pt });
    };

    toggleStep = (activeStep) => () => {
        if (this.state.activeStep !== activeStep) {
            this.setState({
                activeStep: activeStep
            });
            // this.handleAutoSave(this.state.dataPelanggaran, activeStep)

        }
    };


    render() {
        return (
            <ContentWrapper unwrap>
                {/* <Header /> */}
                <div className="p-3">
                    <div className="content-heading">
                        <span className="font-color-white">Bypass II</span>
                        <div className="ml-auto">
                            <Link href="/app/bypassII">
                                <Button className="color-3e3a8e" color>
                                    <span className="font-color-white">&lt; Kembali</span>
                                </Button>
                            </Link>
                        </div>
                    </div>
                    <Card className="card-default">
                        <CardBody>
                            <Row>
                                <Col xs="4">
                                    <Nav pills vertical={true} className="cursor-pointer">
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "1",
                                                })}
                                                onClick={this.toggleStep("1")}
                                            >
                                                <h4 className="text-left my-3">1. Penetapan Sanksi</h4>
                                            </NavLink>
                                        </NavItem>
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "2",
                                                })}
                                                onClick={this.toggleStep("2")}
                                            >
                                                <h4 className="text-left my-3">2. Penetapan Jenis Pelanggaran</h4>
                                            </NavLink>
                                        </NavItem>
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "3",
                                                })}
                                                onClick={this.toggleStep("3")}
                                            >
                                                <h4 className="text-left my-3">3. Berita Acara Pleno</h4>
                                            </NavLink>
                                        </NavItem>
                                    </Nav>
                                </Col>

                                <Col xs="8">
                                    <TabContent activeTab={this.state.activeStep} className="border-0">
                                    <TabPane tabId="1">
											<div className="pt-3 mb-3">
												<h2>Penetapan Sanksi</h2>
												{/* {this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi}  />}
											</div>
											<FormGroup row className="mt-3">
												<label className="col-md-2 col-form-label">
													Dokumen Laporan Evaluasi dan Pembahasan
												</label>
												<div className="col-md-10">

													<div style={{ display: "none" }}>
														<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
													</div>
													<ReactToPrint
														trigger={() => {
															return <span>

																<Button color className="btn-labeled-4 mt-0">
																	<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
																</Button>
															</span>
														}}
														content={() => this.componentRef}
													/>
												</div>
											</FormGroup>
											<hr />
											<div className="d-flex">
												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
													<span className="font-color-white">Previous</span>
												</Button>
												<Button className="ml-auto btn-login color-3e3a8e" color onClick={() => { this.validation() }}>
													<span className="font-color-white">Next</span>
												</Button> */}
											</div>
										</TabPane>
                                        <TabPane tabId="2">
											<div className="pt-3 mb-3">
												<h2>Penetapan Jenis Pelanggaran</h2>
												{/* <TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran} />
											</div>
											<hr />
											<div className="d-flex">
												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
													<span className="font-color-white">Previous</span>
												</Button>
												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("4")}>
													<span className="font-color-white">Next</span>
												</Button> */}
											</div>
										</TabPane>
                                        <TabPane tabId="3">
											{/* <Card>
												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
											</Card> */}
                                            <Card>
                                                 <BeritaAcara_Bypass pt={this.state.pt}/>
                                            </Card>
                                           
											<div className="d-flex">
												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
													<span className="font-color-white">Previous</span>
												</Button>
												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("5")}>
													<span className="font-color-white">Next</span>
												</Button>
											</div>
										</TabPane>
                                    </TabContent>
                                </Col>
                            </Row>
                        </CardBody>
                    </Card>



                </div>
            </ContentWrapper>
        )
    }


}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(bypassIIDetail);