$(document).ready(async function () {
  $('.campoFloat').maskMoney({
    decimal: ".",
    thousands: "",
    precision: 2,
  })

  $('#modalMapaCotacao').on('shown.bs.modal', () => {
    setTimeout(
      () => $('#tabelaItensMapaCotacao')?.DataTable()?.columns?.adjust()?.draw(false),
      300,
    )
  })

  $('#modalMapaCotacao').on('hide.bs.modal', () => {
    $('.campoMapaCotacao').val('')
  })

  $('#btnNegociarCotacao').on('click', function () {
    ModalNegociacaoCotacao.carregar({
      nome: ModalMapaCotacaoNegociados.nome,
      numero: ModalMapaCotacaoNegociados.numero,
    })
  })

  $('#tabelaItensMapaCotacao').on('click', '#btnHistorico', async function () {
    const datatable = $('#tabelaItensMapaCotacao').DataTable()
    const { codigo, cor, tam, descricao } = datatable?.row($(this)?.parents('tr'))?.data()
    $.LoadingOverlay('show')
    ModalHistoricoNegociacaoCotacao.buscarDados(ModalMapaCotacaoNegociados.numero, codigo, cor, tam).then((resultado) => {
      ModalHistoricoNegociacaoCotacao.carregar({ ...resultado, codigo, descricao })
    }).catch((error) => {
      console.error(error)
      msgErro('Ocorreu um erro ao carregar os dados.')
    }).finally(() => $.LoadingOverlay('hide'))
  })

  $('#tabelaItensMapaCotacao').on('draw.dt', function () {
    ModalMapaCotacaoNegociados.adicionarEventosPropostaAprovada()
    $('#cbSelAllMapaCotacao').on('change', function () {
      $('.classCbSelAllMapaCotacao').prop('checked', this.checked)
      if (this.checked) {
        $("#tabelaItensMapaCotacao tr").addClass("selected")
      } else {
        $("#tabelaItensMapaCotacao tr").removeClass("selected")
      }
    })
    $('.classCbSelAllMapaCotacao').on('change', function () {
      const linha = $('#tabelaItensMapaCotacao').DataTable().row($(this).closest('tr'))
      if (this.checked) {
        $(linha.node()).addClass('selected')
      } else {
        $(linha.node()).removeClass('selected')
      }
    })
  })

  $('#tabelaItensMapaCotacao').on('click', '#btnInformacoesItem', async function () {
    const datatableItens = $('#tabelaItensMapaCotacao').DataTable()
    const { codigo, cor, tam, tipoItem } = datatableItens?.row($(this)?.parents('tr'))?.data()
    ModalInformacoesItemCentralCompras.carregarModalInformacoesItem(codigo, cor, tam, tipoItem)
  })

  function validarItensSelecionados(itens) {
    if (itens.length === 0) {
      msgErro('Nenhum item selecionado, impossível continuar.')
      return false
    }

    if (itens.some((it) => !it.numero)) {
      msgErro('Existem itens selecionados sem nenhuma proposta selecionada, impossível continuar.')
      return false
    }

    return true
  }

  $('#btnGerarOrdemCompra').on('click', async function () {
    try {
      $.LoadingOverlay('show')
      const itensSelecionados = retornarItensSelecionados()
      if (!validarItensSelecionados(itensSelecionados)) {
        return
      }
      const dados = await retornarDadosGerarOrdemCompra(itensSelecionados)
      if (!ModalGerarOrdemCompra.validarDados({ itens: dados.itens })) {
        return
      }
      ModalGerarOrdemCompra.carregar({
        ...dados,
        entrega: retornarDataISOEmYMD({ dataISO: new Date(dados.entrega), separadorData: '-', usarUTC: true }),
      })
      ModalGerarOrdemCompra.abrir()
    } catch (error) {
      console.error(error)
      msgErro('Não foi possível gerar ordem de compra.')
    } finally {
      $.LoadingOverlay('hide')
    }
  })

  async function retornarDadosGerarOrdemCompra(itens) {
    const response = await requisicao(
      "POST",
      `/sisplan/centralcompras/cotacao/v1/dadosordemcompra?`,
      '',
      JSON.stringify({ itens }),
      3600000
    )

    const json = await response.json()

    if (!json) {
      return
    }

    const { resultado, mensagem } = json
    if (mensagem?.codigo !== 200) {
      throw mensagem?.mensagem
    }

    return resultado
  }

  function retornarItensSelecionados() {
    const table = $("#tabelaItensMapaCotacao").DataTable()

    const resultado = table
      .rows(".selected").nodes()
      .toArray()
      .map(tr => {
        const rowData = table.row(tr).data()

        return {
          ...rowData,
          numero: pegaChave($(tr).find('.inputPropostaAprovada')),
        }
      })

    return resultado
  }

  $('#modalGerarOrdemCompra').on('hide.bs.modal', function () {
    $.LoadingOverlay('show')
    ModalMapaCotacaoNegociados.buscarDados(ModalMapaCotacaoNegociados.numero).then((dados) => {
      if (!dados || !dados.itens) {
        ModalMapaCotacaoNegociados.criarTabelaItens([])
        return
      }

      ModalMapaCotacaoNegociados.carregar({ ...dados, numero: ModalMapaCotacaoNegociados.numero })
    }).catch((error) => {
      console.error(error)
      msgErro('Ocorreu um erro ao carregar os dados.')
    }).finally(() => $.LoadingOverlay('hide'))
  })
})

window.ModalMapaCotacaoNegociados = window.ModalMapaCotacaoNegociados || {}

ModalMapaCotacaoNegociados.nome = null
ModalMapaCotacaoNegociados.numero = null

ModalMapaCotacaoNegociados.carregar = (dados) => {
  const { numero, itens } = dados
  ModalMapaCotacaoNegociados.criarTabelaItens(itens)
  $('#tituloModalMapaCotacao').html(`Mapa de Cotação - [${numero}]`)
  ModalMapaCotacaoNegociados.numero = numero
  $('#modalMapaCotacao').modal('show')
}

ModalMapaCotacaoNegociados.criarTabelaItens = (data = []) => {
  if ($.fn.DataTable.isDataTable('#tabelaItensMapaCotacao')) {
    $('#tabelaItensMapaCotacao').DataTable().destroy()
    $('#tabelaItensMapaCotacao').empty()
  }

  const columns = [
    {
      data: 'sel',
      title: `<div class="icheck-primary d-inline">
                <input type="checkbox" id="cbSelAllMapaCotacao">
                <label for="cbSelAllMapaCotacao"></label>
              </div>
              `,
      render: (_data, _type, _row, { row: rowIndex, col: colIndex }) => (
        `<div class="icheck-primary d-inline">
          <input type="checkbox" id="cb_mapa_col_row_${rowIndex}" class="classCbSelAllMapaCotacao">
          <label for="cb_mapa_col_row_${rowIndex}"></label>
        </div>`
      )
    },
    {
      data: 'ordem',
      title: 'Ordem',
      render: (data) => (
        '<div style="text-align:start;"> ' +
        '    <button class="btn btn-info btn-sm dropdown-toggle btnVerificaOpcoes" id="tutorialTabela" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ' +
        '      ' + data + ' ' +
        '    </button> ' +
        '    <div class="dropdown-menu"> ' +
        '    <button class="dropdown-item" type="button" title="Informações Item" id="btnInformacoesItem">Informações Item</button>     ' +
        '    <button class="dropdown-item" type="button" title="Informações Item" id="btnHistorico">Histórico</button>     ' +
        '</div>'
      )
    },
    {
      data: 'codigo',
      title: 'Código',
    },
    {
      data: 'descricao',
      title: 'Descrição',
    },
    {
      data: 'cor',
      title: 'Cor',
    },
    {
      data: 'descCor',
      title: 'Desc. Cor',
    },
    {
      data: 'tam',
      title: 'Tamanho',
    },
    {
      data: 'qtde',
      title: 'Quantidade',
      className: 'text-right',
      render: function (data) {
        return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
      }
    },
    {
      data: 'precoUltimaCompra',
      title: 'Preço Última Compra',
      className: 'text-right',
      render: function (data) {
        return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
      }
    },
    {
      data: 'fornecedorAprovado',
      title: 'Proposta Aprovada',
      render: function (value, _1, data, { row }) {
        return `<div>
                  <div class="input-group flex-nowrap">
                    <input type="text" class="input-default focus form-control inputPropostaAprovada" ordem="${data.ordem}" codigo="${data.codigo}" cor="${data.cor}" tam="${data.tam}" id="txtFornecedorAprovado${data.ordem}" value="${value}" name="txtFornecedorAprovado${data.ordem}" placeholder="Proposta Aprovada" style="min-width: 60ch">
                    <div class="input-group-append">
                      <button class="btn bg-danger" id="btnFornecedorAprovado${data.ordem}" name="btnFornecedorAprovado${data.ordem}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
                      <button class="btn bg-danger" id="btnLimpaFornecedorAprovado${data.ordem}" name="btnLimpaFornecedorAprovado${data.ordem}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
                    </div>
                  </div>
                </div>`
      }
    },
    {
      data: 'precoAprovado',
      title: 'Preço Aprovado',
      className: 'text-right',
      render: function (value, _1, data, { row }) {
        const formattedValue = retornarFloatFormatadoEmMonetario({ valor: value, quantidadeCasasDecimais: 4 })
        return `<div class="input-group-append justify-content-end">
                      <input type="text" value="${formattedValue}" style="min-width: 15ch; max-width: 20ch" class="input-default focus form-control validate text-right" disabled id="txtPrecoAprovado${data.ordem}" name="txtPrecoAprovado${data.ordem}" placeholder="0,0000">
                  </div>`
      },
    },
    {
      data: 'tipoItem',
      title: 'Tipo Item',
      visible: false,
    }
  ]

  if (data.length) {
    data[0].cotacoes?.forEach((cotacao) => {
      const novaColuna = {
        data: cotacao.fornecedor,
        title: `${cotacao.numero} - ${cotacao.nome}`,
        className: 'text-right',
        render: function (data) {
          if (!data || !safeParseFloat(data)) {
            return '-'
          }
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 4 })
        }
      }
      columns.push(novaColuna)
    })

    data.forEach((it) => {
      it.cotacoes.forEach((cotacao) => {
        const chave = cotacao.fornecedor
        it[chave] = cotacao.preco
      })
    })
  }

  $('#tabelaItensMapaCotacao').DataTable({
    sort: false,
    paging: false,
    destroy: true,
    lengthChange: false,
    filter: false,
    info: false,
    ordering: false,
    sorting: false,
    order: false,
    autoWidth: true,
    data,
    columns,
    scrollX: true,
    scrollY: '500px',
  })
}

ModalMapaCotacaoNegociados.adicionarEventosPropostaAprovada = function () {
  $('.inputPropostaAprovada').each((_, input) => {
    const idInput = $(input).attr('id')
    const ordem = $(input).attr('ordem')
    const codigo = $(input).attr('codigo')
    const cor = $(input).attr('cor')
    const tam = $(input).attr('tam')

    const where = [`COTACAO.NUMERO LIKE '${ModalMapaCotacaoNegociados.numero}[PERCENTUAL]'`, `COTACAO.MATERIAL = '${codigo}'`]

    if (cor) {
      where.push(`COTACAO.COR = '${cor}'`)
    }

    if (tam) {
      where.push(`COTACAO.TAM = '${tam}'`)
    }

    const pesquisa = {
      tabela: 'COTACAO',
      camposSelect: ['COTACAO.NUMERO', 'ENTIDADE.NOME', 'COALESCE(COTACAO.PRECO, 0) PRECO'],
      innerJoin: [{ tabela: 'ENTIDADE', condicao: 'COTACAO.CODCRE = ENTIDADE.CODCLI' }],
      where,
      groupBy: ['COTACAO.NUMERO', 'ENTIDADE.NOME', 'COTACAO.PRECO'],
      camposSelectSubSelect: ['NUMERO', 'NOME', 'PRECO'],
      groupBySubselect: ['NUMERO', 'NOME', 'PRECO'],
    }

    const pesquisaAutocompleta = {
      tabela: 'COTACAO',
      camposSelect: ['COTACAO.NUMERO CHAVE', 'ENTIDADE.NOME DESCRICAO', 'COALESCE(COTACAO.PRECO, 0) PRECO'],
      innerJoin: [{ tabela: 'ENTIDADE', condicao: 'COTACAO.CODCRE = ENTIDADE.CODCLI' }],
      where,
      groupBy: ['COTACAO.NUMERO', 'ENTIDADE.NOME', 'COTACAO.PRECO'],
    }

    $(`#${idInput.replace('txt', 'btn')}`).off('pesquisa_serverside')
    $(`#${idInput.replace('txt', 'btn')}`).pesquisa_serverside([`#${idInput}`, `#txtPrecoAprovado${ordem}`], ['NUMERO', 'PRECO'], ['NOME', 'PRECO'], JSON.stringify(pesquisa), `Pesquisa`, () => undefined, [false, true])
    $(`#${idInput}`).autocompleta(1, `JSON=${JSON.stringify(pesquisaAutocompleta)}`, [`#txtPrecoAprovado${ordem}`], ['PRECO'], ['PRECO'], undefined, [true]);
    $(`#${idInput.replace('txt', 'btnLimpa')}`).on('click', function () {
      $(`#${idInput}`).val('')
      $(`#txtPrecoAprovado${ordem}`).val('0,0000')
    })
  })
}

ModalMapaCotacaoNegociados.buscarDados = async (numero) => {
  const response = await requisicao(
    "GET",
    `/sisplan/centralcompras/cotacao/v1/itensnegociacao?`,
    `NUMERO=${encodeURIComponent(numero)}`,
    '',
    3600000
  )

  const json = await response.json()

  if (json) {
    const { resultado, mensagem } = json
    if (mensagem?.codigo !== 200) {
      throw mensagem?.mensagem
    }

    return resultado
  }
}