import React, { Component } from 'react';
import { Programa, SimpleTable, Select } from 'argous/dist/components';
import { serverAction } from 'argous/dist/utils/api'
import passFields from 'argous/dist/fieldsRedux/passFields';
import { setField } from 'argous/dist/fieldsRedux';
import Input from 'argous/dist/components/Input';
import GraficoPizzaAnaliseFeedBack from './GraficoPizzaAnaliseFeedBack';
import Button from 'argous/dist/components/Button';

class RelatorioAnaliseFeedback extends Component {

    pgCode = 'AnaliseFeebackAD'

    state = {
        modalDadosFeedback: false,
        quantidadeF: 0,
        quantidadeI: 0,
        quantidadeN: 0,
        quantidadeTotal: 0,
        appearing: true,
        arr: [],
        cdCiclo: '1',
        filtro: {}
    }

    indicadores = [{
        id: 'F',
        tipo: 'Finalizado'
    }, {
        id: 'I',
        tipo: 'Iniciado'
    }, {
        id: 'N',
        tipo: 'Não Iniciado'
    }]

    executaFiltroPesquisa = (obj) => {
        console.log('Executando executaFiltroPesquisa', obj)

        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }

        if (obj !== undefined && obj !== '') {
            console.log("ADICIONANDO AO FILTRO")
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
                nmF: obj
            }
        }

        console.log("filtro ", filtro)

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })

    }

    executaFiltroCiclo = (obj) => {
        console.log('Executando executaFiltroCiclo', obj)
        var filtro = {
            cdH: this.state.cdH,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: obj,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
            }
        }

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroCargo = (obj) => {
        console.log('Executando executaFiltroCargo', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: obj,
                cdS: this.state.cdS,
            }
            this.setState({
                cdC: obj
            })
        } else {
            delete this.state.cdC
        }



        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroHierarquia = (obj) => {
        console.log('Executando executaFiltroHierarquia', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: obj,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
            }
            this.setState({
                cdH: obj
            })
        } else {
            delete this.state.cdH
        }

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroStatus = (obj) => {
        console.log('Executando executaFiltroStatus', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdC: this.state.cdC,
        }
        if (obj !== 'Selecionar') {
            console.log("DIFERENTE DE SELECIONAR ", obj)
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: obj,
            }
            this.setState({
                cdS: obj
            })
        } else {
            delete this.state.cdS
        }


        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    init = () => {


        //{cdCiclo:'', cdH: '', cdC: '', cdS: '', nmF:''}
        const filtro = {
            cdFiltro: '1'
        }
        console.log('Filtro', filtro)
        serverAction('buscaAvaliacoesDeFeedback', this.state.filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    render() {
        const { modalDadosFeedback, quantidadeF, quantidadeI, quantidadeN, quantidadeTotal, arr } = this.state

        const data = {
            datasets: [{
                data: [quantidadeN, quantidadeF, quantidadeI],
                backgroundColor: ['#F6F612', '#F33493', '#3C96F0'],
                hoverBorderColor: '#BBB3B3',
                hoverBorderWidth: 3,
            }],
            labels: arr
        }

        return (

            <Programa programDidMount={this.init} code={this.pgCode}>

                        <div>
                            <div className='row'>
                                <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>

                                    <div className='row'>
                                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>



                                            <label>Ciclo de Avaliação:</label>
                                            <Select field='cdCiclo'
                                                optionsField='listaCiclos'
                                                optionsValue='chave'
                                                optionsLabel='descricao'
                                                onChange={obj => this.executaFiltroCiclo(obj)}>
                                                <option label='Selecionar'>Selecionar</option>
                                            </Select>
                                            <br />
                                        </div>

                                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                            <label>Hierarquia:</label>
                                            <Select field='cdH'
                                                optionsField='listaHierarquias'
                                                optionsLabel='descricao'
                                                optionsValue='chave'
                                                onChange={obj => this.executaFiltroHierarquia(obj)}>
                                                <option label='Selecionar'>Selecionar</option>
                                            </Select>
                                            <br />
                                        </div>
                                    </div>

                                    <div className='row'>
                                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                            <label>Cargo</label>
                                            <Select field='cdC'
                                                optionsField='listaCargos'
                                                optionsLabel='descricao'
                                                optionsValue='chave'
                                                onChange={obj => this.executaFiltroCargo(obj)}>
                                                <option label='Selecionar'>Selecionar</option>
                                            </Select>
                                            <br />
                                        </div>

                                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                            <label>Status Feedback:</label>
                                            <Select field='cdS'
                                                optionsField='listaQuantidades'
                                                optionsLabel='tipo'
                                                optionsValue='id'
                                                onChange={obj => this.executaFiltroStatus(obj)}>
                                                <option label='Selecionar'>Selecionar</option>
                                            </Select>
                                            <br />
                                        </div>
                                    </div>
                                </div>

                                <div className='col-lg-3 col-md-3 col-sm-3 col-xs-3'>Indicadores:
                        <br /><br />
                                    <label>Total de Feedbacks :</label> {quantidadeTotal} <br />
                                    <label>Não-Iniciados : </label>{quantidadeN}<br />
                                    <label>Iniciados :</label>{quantidadeI}<br />
                                    <label>Finalizados :</label>{quantidadeF}<br />
                                </div>

                                <div className='col-lg-3 col-md-3 col-sm-3 col-xs-3'>
                                    <GraficoPizzaAnaliseFeedBack data={data} />

                                </div>
                            </div>
                        </div>

                        <div className='row'>
                            <div className='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
                                <label><br /></label>
                                <Input field='ds_descricao' onBlur={e => this.executaFiltroPesquisa(e.target.value)} placeholder='Pesquise por funcionário, área ou cargo' />
                                <br />
                            </div>
                        </div>

                    <div className="row">
                        {!modalDadosFeedback &&
                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                <SimpleTable
                                    field='itensFB'
                                    head={['FUNCIONÁRIO', 'ÁREA', 'CARGO', 'CICLO']}
                                    alias={['ds_nome', 'ds_cc', 'ds_cargo', 'ds_ciclo']}
                                    rows={25}
                                    onClick={obj =>
                                        this.visualizaFeedback(obj)
                                    }>
                                </SimpleTable>
                            </div>
                        }
                    </div>


            </Programa>
                )
            }
        }
export default passFields(RelatorioAnaliseFeedback);