$(document).ready(async function () {
  componenteFiltro('deposito', false, false, 'DepositoSubproduto')
  componenteFiltro('fluxo', false, false, 'FluxoSubproduto')
  componenteFiltro('tabPrazo', false, false, 'PeriodoSubproduto')
  $('#btnProcessarSubproduto').on('click', function () {
    ModalOfSubproduto.processar()
  })

  $('#btnConfirmarSubproduto').on('click', function () {
    ModalOfSubproduto.salvar()
  })
})

window.ModalOfSubproduto = window.ModalOfSubproduto || {}

ModalOfSubproduto.numero = null
ModalOfSubproduto.produto = null
ModalOfSubproduto.grade = null
ModalOfSubproduto.idTipo = null
ModalOfSubproduto.pedido = null

ModalOfSubproduto.carregar = ({ numero, produto, obs, callbackFechar, grade, idTipo, pedido, dataIni, dataFim, existemOfsFilhas, deposito, periodo }) => {
  try {
    $.LoadingOverlay('hide')
    ModalOfSubproduto.numero = numero
    ModalOfSubproduto.produto = produto
    ModalOfSubproduto.grade = grade
    ModalOfSubproduto.idTipo = idTipo
    ModalOfSubproduto.pedido = pedido
    $('#txtNumeroPrincipal').val(numero)
    insereValor('#txtProdutoPrincipal', produto.chave, produto.descricao)
    $('#txtObservacaoSubproduto').val(obs)
    $('#txtInicioSubproduto').val(dataIni)
    $('#txtFimSubproduto').val(dataFim)
    insereValor('#txtDepositoSubproduto', deposito.chave, deposito.descricao)
    insereValor('#txtPeriodoSubproduto', periodo.chave, periodo.descricao)

    $('#modalOfSubproduto').modal('show')

    $('#modalOfSubproduto').on('hide.bs.modal', function () {
      callbackFechar?.()
    })

    $('#btnFecharSubproduto').on('click', function () {
      if (!existemOfsFilhas) {
        rotinaGeraLog('ORDEM DE PRODUCAO', ModalOfSubproduto.numero, `USUARIO: ${getCookie('usuario')} NAO GEROU ORDENS DE PRODUCAO PARA OS SUBPRODUTOS DA OF: ${ModalOfSubproduto.numero}`, 'Inclusão')
      }
      $('#modalOfSubproduto').modal('hide')
    })
  } catch (error) {
    msgErro('Não foi possível carregar os dados do(s) subproduto(s).')
    console.error(error)
  } finally {
    $.LoadingOverlay('hide')
  }
}

ModalOfSubproduto.validarSeDevemSerGeradasOfsFilhas = async function ({ numero }) {
  try {
    $.LoadingOverlay('show')

    const response = await requisicao('GET', '/sisplan/ofsubproduto/v1/validargerar?', `NUMERO=${numero}`, '', 90000)
    const dados = await response.json()

    if (!dados) {
      throw new Error('Não foi possível validar os dados.')
    }

    const { mensagem } = dados
    if (mensagem?.codigo !== 200) {
      throw mensagem?.mensagem
    }

    const { resultado } = dados

    return resultado ?? {
      gerar: false,
      existemOfsFilhas: false,
    }

  } catch (error) {
    console.error(error)
    msgErro(error)
  } finally {
    $.LoadingOverlay('hide')
  }
}

ModalOfSubproduto.limparModal = function () {

}

ModalOfSubproduto.processar = async function () {
  try {
    $.LoadingOverlay('show')
    const body = {
      numeroOfPrincipal: ModalOfSubproduto.numero,
      deposito: pegaChave('#txtDepositoSubproduto'),
      grade: ModalOfSubproduto.grade,
      fluxo: pegaChave('#txtFluxoSubproduto'),
      periodo: pegaChave('#txtPeriodoSubproduto'),
      inicio: $('#txtInicioSubproduto').val() || '1200-01-01',
      fim: $('#txtFimSubproduto').val() || '2500-12-31',
    }

    const response = await requisicao('POST', '/sisplan/ofsubproduto/v1/itensprocessados?', '', JSON.stringify(body), 1800000)
    const dados = await response.json()

    if (!dados) {
      throw new Error('Não foi possível processar os dados.')
    }

    const { mensagem } = dados
    if (mensagem?.codigo !== 200) {
      throw mensagem?.mensagem
    }

    const { resultado } = dados

    ModalOfSubproduto.criarTabelaItensProcessados({ dados: resultado.itens })
  } catch (error) {
    console.error(error)
    msgErro(error)
  } finally {
    $.LoadingOverlay('hide')
  }
}

ModalOfSubproduto.retornarInputDeposito = function (codigo, cor, tam, deposito, descricao) {
  const valor = (deposito && `[${deposito}] - ${descricao}`) ?? ''

  return `<div class="input-group" style="width: 40ch">
            <input type="text" autocomplete="off" class="input-default focus form-control" id="txtDeposito_${codigo}_${cor}_${tam}" name="txtDeposito_${codigo}_${cor}_${tam}" placeholder="Depósito" ${valor && `value="${valor}"`}>
            <div class="input-group-append">
              <button class="btn bg-danger" id="btnDeposito_${codigo}_${cor}_${tam}" name="btnDeposito_${codigo}_${cor}_${tam}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
              <button class="btn bg-danger" id="btnLimpaDeposito_${codigo}_${cor}_${tam}" name="btnLimpaDeposito_${codigo}_${cor}_${tam}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
            </div>
          </div>`
}

ModalOfSubproduto.retornarInputFluxo = function (codigo, cor, tam, fluxo, descricao) {
  const valor = (fluxo && `[${fluxo}] - ${descricao}`) ?? ''

  return `<div class="input-group" style="width: 40ch">
            <input type="text" autocomplete="off" class="input-default focus form-control" id="txtFluxo_${codigo}_${cor}_${tam}" name="txtFluxo_${codigo}_${cor}_${tam}" placeholder="Fluxo" ${valor && `value="${valor}"`}>
            <div class="input-group-append">
              <button class="btn bg-danger" id="btnFluxo_${codigo}_${cor}_${tam}" name="btnFluxo_${codigo}_${cor}_${tam}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
              <button class="btn bg-danger" id="btnLimpaFluxo_${codigo}_${cor}_${tam}" name="btnLimpaFluxo_${codigo}_${cor}_${tam}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
            </div>
          </div>`
}

ModalOfSubproduto.retornarInputPeriodo = function (codigo, cor, tam, periodo) {
  const valor = periodo

  return `<div class="input-group" style="width: 25ch">
            <input type="text" autocomplete="off" class="input-default focus form-control" id="txtPeriodo_${codigo}_${cor}_${tam}" name="txtPeriodo_${codigo}_${cor}_${tam}" placeholder="Período" ${valor && `value="${valor}"`}>
            <div class="input-group-append">
              <button class="btn bg-danger" id="btnPeriodo_${codigo}_${cor}_${tam}" name="btnPeriodo_${codigo}_${cor}_${tam}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
              <button class="btn bg-danger" id="btnLimpaPeriodo_${codigo}_${cor}_${tam}" name="btnLimpaPeriodo_${codigo}_${cor}_${tam}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
            </div>
          </div>`
}

ModalOfSubproduto.retornarInputInicio = function (codigo, cor, tam, inicio) {
  const valor = inicio

  return `<div class="col-auto px-0">
            <input type="date" max="2500-12-31" class="input-default focus form-control" id="txtInicio_${codigo}_${cor}_${tam}" value="${valor}" name="txtInicio_${codigo}_${cor}_${tam}">
          </div>`
}

ModalOfSubproduto.retornarInputFim = function (codigo, cor, tam, fim) {
  const valor = fim

  return `<div class="col-auto px-0">
            <input type="date" max="2500-12-31" class="input-default focus form-control" id="txtFim_${codigo}_${cor}_${tam}" value="${valor}" name="txtFim_${codigo}_${cor}_${tam}">
          </div>`
}

ModalOfSubproduto.criarTabelaItensProcessados = function ({ dados }) {
  if ($.fn.DataTable.isDataTable('#tabelaItensProcessados')) {
    $('#tabelaItensProcessados').DataTable().destroy()
    $('#tabelaItensProcessados').empty()
  }

  const columns = [
    {
      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',
    },
    {
      data: 'deposito',
      title: 'Depósito',
      render: function (_1, _2, rowData) {
        return ModalOfSubproduto.retornarInputDeposito(rowData.codigo, rowData.cor, rowData.tam, rowData.deposito, rowData.descDeposito)
      }
    },
    {
      data: 'periodo',
      title: 'Período',
      render: function (_1, _2, rowData) {
        return ModalOfSubproduto.retornarInputPeriodo(rowData.codigo, rowData.cor, rowData.tam, rowData.periodo)
      }
    },
    {
      data: 'inicio',
      title: 'Início',
      render(data, _2, rowData) {
        try {
          const dataFormatada = retornarDataISOEmYMD({ dataISO: data, usarUTC: true, separadorData: '-' })
          return ModalOfSubproduto.retornarInputInicio(rowData.codigo, rowData.cor, rowData.tam, dataFormatada)
        } catch (_) {
          return ''
        }
      },
    },
    {
      data: 'fim',
      title: 'Fim',
      render(data, _2, rowData) {
        try {
          const dataFormatada = retornarDataISOEmYMD({ dataISO: data, usarUTC: true, separadorData: '-' })
          return ModalOfSubproduto.retornarInputFim(rowData.codigo, rowData.cor, rowData.tam, dataFormatada)
        } catch (_) {
          return ''
        }
      },
    },
    {
      data: 'fluxo',
      title: 'Fluxo',
      render: function (_1, _2, rowData) {
        return ModalOfSubproduto.retornarInputFluxo(rowData.codigo, rowData.cor, rowData.tam, rowData.fluxo, rowData.descFluxo)
      }
    },
    {
      data: 'estoque',
      title: 'Estoque',
      className: 'text-right',
    },
    {
      data: 'consOf',
      title: 'Cons. OF',
      className: 'text-right',
    },
  ]

  $('#tabelaItensProcessados').DataTable({
    sort: false,
    paging: false,
    destroy: true,
    lengthChange: false,
    filter: false,
    info: false,
    ordering: false,
    sorting: false,
    order: false,
    autoWidth: true,
    data: dados ?? [],
    columns,
    scrollX: true,
    scrollY: '315px',
  })

  ModalOfSubproduto.carregarPesquisasTabela()
}

ModalOfSubproduto.carregarPesquisasTabela = function () {
  const dados = $('#tabelaItensProcessados').DataTable().data().toArray()

  dados.forEach(({ codigo, cor, tam }) => {
    $(`[id="txtDeposito_${codigo}_${cor}_${tam}"]`).autocompleta(1, `JSON={ "tabela":"DEPOSITO", "camposSelect":["CODIGO CHAVE, DESCRICAO"], "where": [] }`);
    $(`[id="btnDeposito_${codigo}_${cor}_${tam}"]`).pesquisa_serverside([`[id="txtDeposito_${codigo}_${cor}_${tam}"]`], ['CODIGO', 'DESCRICAO'], ['DESCRICAO', 'CODIGO'], '{"tabela":"DEPOSITO", "camposSelect":[ "CODIGO", "DESCRICAO" ], "where": null}', 'Pesquisa Depósito')
    $(`[id="btnLimpaDeposito_${codigo}_${cor}_${tam}"]`).on('click', function () {
      $(`[id="txtDeposito_${codigo}_${cor}_${tam}"]`).val('')
    });
    $(`[id="txtFluxo_${codigo}_${cor}_${tam}"]`).autocompleta(1, `JSON={ "tabela":"ROTEIRO", "camposSelect":["CODIGO CHAVE, DESCRICAO"], "where": [] }`);
    $(`[id="btnFluxo_${codigo}_${cor}_${tam}"]`).pesquisa_serverside([`[id="txtFluxo_${codigo}_${cor}_${tam}"]`], ['CODIGO', 'DESCRICAO'], ['DESCRICAO', 'CODIGO'], '{"tabela":"ROTEIRO", "camposSelect":[ "CODIGO", "DESCRICAO" ], "where": null}', 'Pesquisa Fluxo')
    $(`[id="btnLimpaFluxo_${codigo}_${cor}_${tam}"]`).on('click', function () {
      $(`[id="txtFluxo_${codigo}_${cor}_${tam}"]`).val('')
    });
    $(`[id="txtPeriodo_${codigo}_${cor}_${tam}"]`).autocompleta(1, `JSON={ "tabela":"TABPRZ", "camposSelect":["PRAZO CHAVE, DESCRICAO"], "where": [] }`, [`[id="txtPeriodo_${codigo}_${cor}_${tam}"]`], ['CHAVE'], [], undefined, [true]);
    $(`[id="btnPeriodo_${codigo}_${cor}_${tam}"]`).pesquisa_serverside([`[id="txtPeriodo_${codigo}_${cor}_${tam}"]`], ['PRAZO', 'DESCRICAO'], ['DESCRICAO', 'PRAZO'], '{"tabela":"TABPRZ", "camposSelect":[ "PRAZO", "DESCRICAO" ], "where": null}', 'Pesquisa Prazo', undefined, [true])
    $(`[id="btnLimpaPeriodo_${codigo}_${cor}_${tam}"]`).on('click', function () {
      $(`[id="txtPeriodo_${codigo}_${cor}_${tam}"]`).val('')
    });
  })
}

ModalOfSubproduto.retornarDadosSalvar = function () {
  const dataAtualEmYMD = retornarDataISOEmYMD({ dataISO: new Date(), separadorData: '-', usarUTC: true, })
  const dados = $('#tabelaItensProcessados').DataTable().data().toArray()
  const ofs = []

  dados.forEach((it) => {
    const index = ofs.findIndex((ordemProducao) => ordemProducao.codigo === it.codigo)
    if (index > -1) {
      ofs[index].of_iten.push({
        cor: it.cor,
        tam: it.tam,
        qtde: it.qtde,
      })

      return
    }
    ofs.push({
      periodo: $(`[id="txtPeriodo_${it.codigo}_${it.cor}_${it.tam}"]`).val(),
      id_tipo: ModalOfSubproduto.idTipo,
      codigo: it.codigo,
      dt_inicio: $(`[id="txtInicio_${it.codigo}_${it.cor}_${it.tam}"]`).val() || dataAtualEmYMD,
      dt_final: $(`[id="txtFim_${it.codigo}_${it.cor}_${it.tam}"]`).val() || dataAtualEmYMD,
      deposito: pegaChave(`[id="txtDeposito_${it.codigo}_${it.cor}_${it.tam}"]`),
      observacao: $('#txtObservacaoSubproduto').val(),
      fluxo: pegaChave(`[id="txtFluxo_${it.codigo}_${it.cor}_${it.tam}"]`),
      emp_id: getCookie('emp_id'),
      pedido: ModalOfSubproduto.pedido,
      of_iten: [{
        cor: it.cor,
        tam: it.tam,
        qtde: it.qtde,
      }],
    })
  })

  return {
    ofs,
    tela: 'ORDEM DE PRODUCAO',
    numeroOfPrincipal: ModalOfSubproduto.numero,
  }
}

ModalOfSubproduto.salvar = async function () {
  try {
    $.LoadingOverlay('show')
    const dadosSalvar = ModalOfSubproduto.retornarDadosSalvar()

    const response = await requisicao('POST', '/sisplan/ofsubproduto/v1/salvar?', '', JSON.stringify(dadosSalvar), 90000)
    const dados = await response.json()

    if (!dados) {
      throw new Error('Não foi possível salvar os dados.')
    }
    const { mensagem } = dados
    if (mensagem?.codigo !== 200) {
      throw mensagem?.mensagem
    }

    const { resultado } = dados

    toastr.success("Dados salvos com sucesso! OFs geradas: " + resultado.join(', '), "Confirmação", {
      toastClass: "alert",
      iconClasses: {
        error: "alert-error",
        info: "alert-info",
        success: "alert-success",
        warning: "alert-warning",
      },
      positionClass: "toast-top-center",
      progressBar: true,
      timeOut: 5000,
      fadeOut: 1000,
      onHidden() {
        $('#modalOfSubproduto').modal('hide')
      },
    }).css({
      "margin-top": "20%",
      width: "500px",
      "max-width": "500px",
    })

    console.log(resultado)
  } catch (error) {
    console.error(error)
    msgErro(error)
  } finally {
    $.LoadingOverlay('hide')
  }
}