import React, { Component } from 'react';
import Images from '../../assets/Images';
import { Typography } from '@material-ui/core';
import api from "../../api";
import Constant from '../../library/Constant';

export default class DeleteApprovalMatrix extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            getApprovedBy: null,
            getTypes: null,
        }
    }

    componentDidMount() {
        if (this.props.type === 'delete') {
            this.getDetailAM()
        }
    }

    getDetailAM() {
        api.create().getDetailAM(this.props.data[1]).then(response => {
            // console.log(response.data)
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === "success") {
                        let data = response.data.data
                        this.setState({
                            id: data.approval_matrix_id,
                            getTypes: data.approval_type_name,
                            getApprovedBy: data.fullname
                        })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                            if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    onClickDelete() {
        if (this.props.type === 'delete') {
            let payload = this.state.id
            this.props.deleteAM(payload)
        }
    }
    
    render() {
        return (
            <div className="test app-popup-show">
                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 20 }}>
                        <img src={Images.failed} />
                    </div>
                    <div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
                        <span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', fontFamily: 'Nunito Sans, sans-serif' }}>
                            Delete {this.state.getTypes} - {this.state.getApprovedBy}?
                        </span>
                    </div>
                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                        <div className="column-1" style={{ alignSelf: 'center' }}>
                            <button
                                type="button"
                                onClick={() => this.props.onClickClose()}
                            >
                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                </div>
                            </button>
                        </div>
                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                            <button
                                type="button"
                                onClick={()=> this.onClickDelete()}
                            >
                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#fff', fontSize: 11 }}>Delete</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}