import React, { Component } from 'react'
import { Tabs, Tab, Typography, Paper, withStyles, Snackbar } from '@material-ui/core'
import ReactTooltip from 'react-tooltip'
import Images from '../../assets/Images'
import ManualBookTia from './ManualBookTia'
import api from '../../api'
import AuditTahunan from './AuditTahunan'
import CreateManagementDoc from './CreateManagementDoc'
import AllDocument from './AllDocument'
import QReview from './QReview'
import BOD from './BOD'
import ManualBookETMS from './ManualBookETMS'
import PopUpKonfirmasi from "./PopUpKonfirmasi";
import Constant from '../../library/Constant'
import MuiAlert from '@material-ui/lab/Alert';

const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

export default class DocumentManagement extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tab: 0,
            listData: [],
            id: 0,
            btncreate: false,
            btnedit: false,
            btndelete: false,
            load: false,
        }
    }

    getPermission() {
        let payload = {
            menu: "document management"
        }
        api.create().getPermission(payload).then(response => {
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        btncreate: response.data.data.create,
                        btnedit: response.data.data.edit,
                        btndelete: response.data.data.delete,
                        load: true
                    })
                } else {
                    this.setState({
                        load: true
                    })
                }
            } else {
                this.setState({ load: true })
            }
        })
    }

    selectTab = (event, newEvent) => {
        this.setState({ tab: newEvent })
        // console.log(this.state.tab)
    }

    componentDidMount() {
        this.getDataDocument()
        this.getPermission()
    }

    getDataDocument(id) {
        // let payload = {
        //     "setting_group_id": 7,
        //     "setting_type_id": 167,
        //     "company_id": 0

        // }
        api.create().getDocumentCategory().then(response => {
            console.log(response);
            if (response) {
                if (response.data.status === "success") {
                    this.setState({
                        listData: response.data.data,
                        id: id === undefined ? response.data.data[0].setting_id : id,
                        loadTable: true,
                        refresh: id === undefined ? '' : 'create'
                    })
                    // console.log(this.state.listData)
                } else {

                }
            } else {

            }
        })
    }

    createDocument(payload, settingID) {
        api.create().uploadDocument(payload).then(response => {
            console.log(response)
            if (response.data) {
                if (response.ok) {
                    if (response.data.message === "The Document Already Exists in The System, Do You Want to Overwrite It?") {
                        this.setState({ formData: payload, docId: response.data.data.document_id }, () => {
                            this.setState({ konfirmasi: true })
                        })
                    }
                    else if (response.data.message === "Upload Document Success") {
                        this.getDataDocument(settingID)
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success', settingID, visibleCreate: false })
                    }
                    else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                            if (response.data.message.includes("Someone Logged In")) {
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    createUploadDocument() {
        const formData = this.state.formData
        formData.append("documentId", this.state.docId)
        // const docuID = Object.values(payload)
        // const formDatas = new FormData();
        // formDatas.append("file", this.state.file);
        // formDatas.append("companyId", this.state.getPerusahaan.company_id);
        // formDatas.append("settingId", this.state.getDocument.document_category_id);
        // formDatas.append("documentPeriode", this.state.periode.periode);
        // formDatas.append("description", this.state.description);
        // formDatas.append("extension", this.state.fileType);
        // // formDatas.append("documentId", docuID[0]);
        // console.log(payload);
        api.create().updateDocument(formData).then(response => {
            console.log(response)
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === "success") {
                        this.getDataDocument(this.state.settingID)
                        this.setState({ konfirmasi: false, alert: true, messageAlert: response.data.message, tipeAlert: 'success', visibleCreate: false })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                            if (response.data.message.includes("Someone Logged In")) {
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    getID(id) {
        console.log(id);
        this.setState({ id })
    }

    closeAlert() {
        this.setState({ alert: false })
    }

    render() {
        return (
            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8' }}>
                {/* {this.props.load && ()} */}
                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                        {this.state.messageAlert}
                    </Alert>
                </Snackbar>
                <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>Management Document</Typography>
                </div>
                <div style={{ padding: 20 }}>
                    <Paper style={{ padding: 20 }}>
                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                        {this.state.btncreate && <span>
                            <a data-tip={'Add'} data-for="add">
                                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
                                    <button
                                        type="button"
                                        onClick={() => this.setState({ visibleCreate: true, refresh: '' })}
                                        style={{ marginRight: 25, background: 'transparent' }}
                                    >
                                        <img src={Images.add} />
                                    </button>
                                </div>
                            </a>
                            <ReactTooltip border={true} id="add" place="bottom" type="light" effect="solid" />
                        </span>}
                        </div>
                        <div style={{ display: 'flex' }}>
                            <Tabs
                                orientation="vertical"
                                variant="scrollable"
                                value={this.state.tab}
                                onChange={this.selectTab}
                                aria-label="simple tabs example"
                                style={{ width: 350 }}
                            >
                                {this.state.listData.map((item, index) => {
                                    return (
                                        <Tab
                                            onClick={() => this.setState({ id: item.setting_id, refresh: '', loadTable : false }, () => this.setState({loadTable: true}))}
                                            label={item.value}
                                        />
                                    )
                                })}
                            </Tabs>
                            {this.state.loadTable && (
                                <AllDocument
                                    data={this.state.listData[this.state.tab]}
                                    refresh={this.state.refresh}
                                    btnedit={this.state.btnedit}
                                    btndelete={this.state.btndelete}
                                    load={this.state.load}
                                    setId={this.state.id}
                                />
                                // this.state.id === 68542 ?
                                //     <AuditTahunan
                                //         data={this.state.listData[this.state.tab]}
                                //         refresh={this.state.refresh}
                                //         btnedit={this.state.btnedit}
                                //         btndelete={this.state.btndelete}
                                //         load={this.state.load}
                                //     />
                                //     :
                                //     this.state.id === 68541 ?
                                //         <ManualBookTia
                                //             data={this.state.listData[this.state.tab]}
                                //             refresh={this.state.refresh}
                                //             btnedit={this.state.btnedit}
                                //             btndelete={this.state.btndelete}
                                //             load={this.state.load}
                                //         />
                                //         :
                                //         this.state.id === 68544 ?
                                //             <QReview
                                //                 data={this.state.listData[this.state.tab]}
                                //                 refresh={this.state.refresh}
                                //                 btnedit={this.state.btnedit}
                                //                 btndelete={this.state.btndelete}
                                //                 load={this.state.load}
                                //             />
                                //             :
                                //             this.state.id === 68543 ?
                                //                 <BOD
                                //                     data={this.state.listData[this.state.tab]}
                                //                     refresh={this.state.refresh}
                                //                     btnedit={this.state.btnedit}
                                //                     btndelete={this.state.btndelete}
                                //                     load={this.state.load}
                                //                 />
                                //                 // :
                                //                 // this.state.id === 68545 ?
                                //                 //     <ManualBookETMS
                                //                 //         data={this.state.listData[this.state.tab]}
                                //                 //         refresh={this.state.refresh}
                                //                 //     />
                                //                     :
                                //                     <span>Coming Soon</span>

                            )}
                        </div>

                    </Paper>
                </div>
                {this.state.konfirmasi && (
                    <PopUpKonfirmasi
                        onClickClosePopUp={() => this.setState({ konfirmasi: false })}
                        uploadDocId={this.createUploadDocument.bind(this)}
                    />
                )}
                {this.state.visibleCreate && (
                    <CreateManagementDoc
                        onClickClose={() => this.setState({ visibleCreate: false })}
                        // getDataDocument={this.getDataDocument.bind(this)}
                        createDocument={this.createDocument.bind(this)}
                        setting_id={this.state.id}
                    />
                )}
            </div>
        )
    }
}