cri

import React from 'react';
import Header from '../HeaderCLMS';
import {Link,Redirect} from 'react-router-dom'
import { Button,Loading ,ToastNotification,NotificationActionButton,InlineNotification} from 'carbon-components-react';
import criteriaContainer from '../../styles/crtieriaContainer.scss'
import CriteriaList from './CriteriaList';
import getCriterias from '../../actions/getCriterias';
// import axios from 'axios';
import deleteCriteria from '../../actions/deleteCriteria';
export default class CriteriaContainer extends React.Component{
    state={
        addBadgeRedirect:null,
        editBadgeRedirect:null,
        criteriasLoaded:null,
        deleteItem:null,
        confirmDelte:null,
        deleting:null
    }
    async componentDidMount(){
        let client = JSON.parse(localStorage.getItem('client'));



        let criteriaResponse = await getCriterias(client.clientId).then((res)=>{

            if(res.data.entity==="DB error"){
                this.setState({criteriasLoaded:false,criterias:res.data.entity})
            }
            else{
                const criterias= res.data.entity
                console.log(criterias);

                this.setState({criteriasLoaded:true,criterias:criterias},()=>{
                    console.log(this.state.criterias);

                    if(this.state.criterias){
                        const criteriasIds=this.state.criterias.map(criteria=>{
                            return criteria.criteriaId
                        })
                        localStorage.setItem('criteriasIds',JSON.stringify(criteriasIds))

                    }
                })


        }
            }
        ).catch(error=>{
            this.setState({criteriasLoaded:false})
            // console.log(error);

        })

    }


    onAddBadge=(e)=>{

        this.setState({addBadgeRedirect:true})

    }

     onDeleteCriteria= async (e,index)=>{

        this.setState({deleting:true})

        let delRes = await deleteCriteria(index)
        .then(res=>{
            console.log(res);
            // this.setState({deleteItem:true})
            // this.setState({deleting:true})
            if(res.data.entity===0){
                alert('Error while deleting')
                this.setState({deleting:null})
            }
            else{
                alert('Deleted successfully')
                if(this.state.criterias){
                    const criterias= [...this.state.criterias]
                   let criteriaIndex = criterias.findIndex((criteria)=>{
                   return criteria.criteriaId===index})
                   if(criteriaIndex!==-1)
                   criterias.splice(criteriaIndex,1)
                   this.setState({criterias:criterias},()=>{
                       localStorage.removeItem('criteriasIds',index)
                   });
                   }
                   this.setState({deleting:null})
            }

        }).catch(error=>{
            console.log(error);

        });

    }


    onEditCriteria=(e,index)=>{

        const criterias= [...this.state.criterias]
        console.log(criterias);

        const criteriaIndex = criterias.findIndex((criteria)=>{
        return criteria.criteriaId===index})
        const criteria = criterias[criteriaIndex];
        console.log(criteria);
        this.props.history.push({pathname:'/badges/'+index,state:criteria})

    }

    // onCloseDeleteNotification(){
    //     this.setState({deleteItem:null})
    //     this.setState({deleting:null})
    // }

    render(){

         if(this.state.criteriasLoaded===null){
            return(
                <div>
                {}
                <Header props={this.props}></Header>
                <div className="loading-criteria">
                <div className="header-loading">
                <h1>Loading Criteria List</h1>
                </div>
                <Loading withOverlay={false} description="Loading the list of badges criteria"></Loading>
                </div>
                </div>
                )
         }
        else  if(this.state.criteriasLoaded===true){
        return(

        <div className="criteria-container">
        <Header props={this.props}></Header>
        <div className="add-new-criteria">
        <Link to="/badges"><Button  onClick={this.onAddBadge} >Add new badge criteria</Button></Link>
        </div>
        <div className="criteria-list">
        <CriteriaList onDeleteCriteria={this.onDeleteCriteria}
        onEditCriteria={this.onEditCriteria}
        criterias={this.state.criterias?this.state.criterias:null}></CriteriaList>
        {/*this.state.deleteItem===true?
//             <InlineNotification
//                 actions={<NotificationActionButton onClick={this.onCloseDeleteNotification}>Okay</NotificationActionButton>}
//                 hideCloseButton={true}

//                 kind="info"
//                 notificationType="inline"
//                 onCloseButtonClick={function noRefCheck(){}}
//                 role="alert"
//                 title="Deleted Successfully"
// />
        //             :null*/}
        </div>

        </div>
            )
        }

        else if(this.state.criteriasLoaded===false){
        return(
            <div>
            <Header props={this.props}></Header>
            <div className="error-loading-criteria">
            <h1>Check your connection/Refresh the page</h1>
            </div>
            </div>
        )
    }
}}