$(document).ready(async function () {
  let verificaInclusao = false;
  let fotoCamera;
  $("#modal-anexos").on('show.bs.modal', async function () {
    await bloqueiaCampos();
    if ($('#txtTela').val() == 'CAIXA') {
      await buscaAnexo($('#txtChave').val(), $('#txtTela').val(), $('#dtCadastro').val());
    } else {
      await buscaAnexo($('#txtChave').val(), $('#txtTela').val());
    }
    $("#imgAnexo").attr('src', `${BASE_URI}/dist/img/prod-1.png`);
  });

  $('#txtDocumento').autocompleta(1, `JSON={ "tabela":"TIPO_DOCUMENTO", "camposSelect":["CODIGO CHAVE, DESCRICAO DESCRICAO"], "where": []}`);
  $('#btnDocumento').pesquisa('#txtDocumento', 'CODIGO', 'DESCRICAO', '/sisplan/funcoes/v1/pesquisa?JSON={ "tabela":"TIPO_DOCUMENTO", "camposSelect":[ "CODIGO", "DESCRICAO"], "where": null}', 'Pesquisa Tipo Documento', 'TIPO_DOCUMENTO');

  $('#fileimagem').change(async function () {
    try {
      $.LoadingOverlay("show");
      const leitorDeArquivos = new FileReader();
      const previaDaImagem = document.querySelector('.imagem');
      const inputArquivo = document.querySelector('.upload');

      let imagemEnviada = inputArquivo.files[0];
      leitorDeArquivos.readAsDataURL(imagemEnviada);
      leitorDeArquivos.addEventListener('loadend', function (load) {
        previaDaImagem.src = load.target.result;
      });

    } finally {
      $.LoadingOverlay('hide');
    }
  });

  $('#btnIncluirAnexo').on('click', async function () {
    desbloqueiaCampos();
    verificaInclusao = true;
    await mostraBotaoGravar();
    const Ordem = await findLastOrder();
    limpaCampos(Ordem);
    $('#txtOrdemAnexo').focus();
    mostraBotaoCancelar();
  });

  $('#tabelaAnexo').on('click', '#btn-download', async function () {
    const data = $('#tabelaAnexo').DataTable().row($(this).parents('tr'));
    await preparaParaBaixarAnexo(data)
  });

  $('#tabelaAnexo').on('click', '#btn-excluir', async function () {
    msgAlerta('Você realmente deseja excluir esse registro?', async () => {
      const data = $("#tabelaAnexo").DataTable().row($(this).parents("tr"));
      await excluiRegistro(data);
    });
  });

  async function preparaParaBaixarAnexo(sData) {
    let sRow = sData.data();
    let pastaAnexosLocal = '';
    window.event.preventDefault();

    $.LoadingOverlay('show');

    requisicao('GET', '/sisplan/funcoes/v1/caminhoanexos?')
      .then(response => response ? response.json() : Promise.reject('Erro ao obter caminho dos anexos'))
      .then(data => {
        pastaAnexosLocal = data.mensagem;
        return requisicao('GET', '/sisplan/funcoes/v1/caminhorelatorios?');
      })
      .then(response => response ? response.json() : Promise.reject('Erro ao obter caminho dos relatórios'))
      .then(data2 => {
        let rotaBase = data2.mensagem.replace(/\\/g, '/');
        let Base = rotaBase.split('/', 3);
        let urlAtual = window.location.href.split('/', 3);

        return requisicao('GET', `/sisplan/funcoes/v1/baixaranexo?TELA=${sRow.TELA.toUpperCase()}&ARQUIVO=${sRow.ARQUIVO}&CHAVE=${encodeURIComponent(sRow.CAMPO_CHAVE)}&DIRETORIO=${pastaAnexosLocal}&`)
          .then(response => {
            if (!response.ok) throw new Error('Erro ao baixar o anexo');
            return response.blob(); // Convertendo para blob
          })
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', sRow.ARQUIVO);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
          });
      })
      .catch(error => console.error('Erro:', error))
      .finally(() => $.LoadingOverlay('hide'));
  }



  async function baixaArquivo(link) {
    $('#anchorDownload').attr('href', link)
    $('#btnDownloadTrigger').trigger('click')
  }

  async function excluiRegistro(sData) {
    let sRow = sData.data();
    try {
      $.LoadingOverlay("show");
      try {
        let response = await requisicao("DELETE", "/sisplan/anexo/v1/excluiranexo?", `ORDEM=${sRow.ORDEM}&ARQUIVO=${sRow.ARQUIVO}&CHAVE=${encodeURIComponent(sRow.CAMPO_CHAVE)}`, null);
        if (!response) {
          return;
        }
        if (response.status != 200) {
          let jsonStr = await response.json();
          msgErro(jsonStr.mensagem);
          return;
        }
        try {
          let response = await requisicao('GET', '/sisplan/funcoes/v1/caminhoanexos?', null);
          if (!response) {
            return;
          }
          jsonStr = await response.json();
          let pastaAnexos = jsonStr.mensagem;

          response = await requisicao('DELETE', '/sisplan/funcoes/v1/anexoarquivo?',
            `DIRETORIO=${pastaAnexos}&TELA=${sRow.TELA}&CHAVE=${encodeURIComponent(sRow.CAMPO_CHAVE)}&ARQUIVO=${sRow.ARQUIVO}&`);

        } catch (error) {
          console.log(error)
        }

        toastr.success("Exclusão efetuada com sucesso!", "Confirmação", {
          toastClass: "success",
          iconClasses: {
            error: "alert-error",
            info: "alert-info",
            success: "alert-success",
            warning: "alert-warning",
          },
          positionClass: "toast-top-center",
          progressBar: true,
          timeOut: 3000,
          fadeOut: 1000,
          onHidden() {
            sData.remove().draw(false);
            $("#imgAnexo").attr('src', `${BASE_URI}/dist/img/prod-1.png`)
            limpaCampos('');
          },
        }).css({
          "margin-top": "20%",
          width: "500px",
          "max-width": "500px",
        });

      } catch (error) {
        console.error(error);
      }
    } finally {
      $.LoadingOverlay("hide");
    }
  }

  $("#modal-anexos").on('hide.bs.modal', async function () {
    limpaCampos('');
    // await mostraBotaoIncluir();
    $('#btnCancelar').trigger('click');
  });

  async function mostraBotaoIncluir() {
    $('#btnIncluirAnexo').removeClass('d-none');
    $('#btnGravarAnexo').addClass('d-none');
    $('#btnAlterarAnexo').attr('disabled', false)
  }
  async function mostraBotaoGravar() {
    $('#btnIncluirAnexo').addClass('d-none');
    $('#btnGravarAnexo').removeClass('d-none');
    $('#btnAlterarAnexo').attr('disabled', true)
  };

  $('#btnAlterarAnexo').on('click', async function () {
    if ($('#tabelaAnexo').DataTable().data().length == 0) {
      msgAlerta('Nenhum dado para alterar.')
      return
    }
    mostraBotaoCancelar()
    desbloqueiaCampos()
    mostraBotaoGravar()
  });

  $('#btnCancelar').on('click', async function () {
    mostraBotaoIncluir()
    mostraBotaoAlterar()
    bloqueiaCampos()
    $('#tabelaAnexo').find('tbody tr:eq(0)').trigger('click');
  })

  async function mostraBotaoAlterar() {
    $('#btnAlterarAnexo').removeClass('d-none')
    $('#btnCancelar').addClass('d-none')
  }

  async function mostraBotaoCancelar() {
    $('#btnAlterarAnexo').addClass('d-none')
    $('#btnCancelar').removeClass('d-none')
  }

  $('#btnGravarAnexo').on('click', async function () {
    await gravaDados();
    $('#btnCancelar').trigger('click')
  });

  async function gravaDados() {
    if (verificaInclusao) {
      const verificaOrdem = await orderExists($('#txtOrdemAnexo').val())
      if (!verificaOrdem) {
        throw msgAlerta('Esta ordem já existe!');
      }
    }

    if ($('#dtValidade').val() < $('#dtCadastro').val()) {
      throw msgAlerta('Data de validade menor que a data de cadastro, impossível continuar.');
    }
    if (!$('#txtOrdemAnexo').val()) {
      throw msgAlerta('Necessário inserir uma ordem.');
    }
    if (!$('#txtArquivo').val()) {
      throw msgAlerta('Nenhum arquivo foi selecionado!');
    }
    if (!$('#txtDescricao').val()) {
      throw msgAlerta('Deve conter uma descrição, verifique!');
    }

    const Anexo = {
      Tela: $('#txtTela').val(),
      Arquivo: $('#txtTela').val() != 'ORCAMENTOPROT' ? $('#txtArquivo').val() : $('#tabelaAnexo').DataTable().data().toArray().length <= 0 ? `${$('#txtChave').val()}.${$('#txtArquivo').val().split('.').pop()}` : `${$('#txtChave').val()}_${$('#txtOrdemAnexo').val()}.${$('#txtArquivo').val().split('.').pop()}`,
      Descricao: $('#txtDescricao').val(),
      Data: $('#dtCadastro').val(),
      Campo_Chave: $('#txtChave').val(),
      Ordem: $('#txtOrdemAnexo').val(),
      Dt_validade: $('#dtValidade').val(),
      Tipo_doc: $('#txtDocumento').val(),
      Usuario: $('#txtUsuario').val(),
    }
    await gravaAnexoBanco(Anexo);
    await gravaAnexoDiretorio(Anexo);
  };

  async function gravaAnexoBanco(Anexo) {
    const url = `/sisplan/anexo/v1/gravaanexo?`
    const response = await requisicao('POST', url, '', `JSON=${JSON.stringify(Anexo)}`, 90000);

    if (!response) {
      return;
    }

    if (response.status != 200) {
      return;
    }
  }


  $('.pop').on('click', function () {
    $('.imagepreview').attr('src', $(this).attr('src'));
    $('#imagemodal').modal('show');
    $('#imagemodal').css('z-index', '999999');
  });

  async function gravaAnexoDiretorio() {
    $.LoadingOverlay('show');
    try {
      const sTela = $('#txtTela').val();
      const sChave = $('#txtChave').val();
      const sArquivo = sTela != 'ORCAMENTOPROT' ? $('#txtArquivo').val() : $('#tabelaAnexo').DataTable().data().toArray().length <= 0 ? `${sChave}.${$('#txtArquivo').val().split('.').pop()}` : `${sChave}_${$('#txtOrdemAnexo').val()}.${$('#txtArquivo').val().split('.').pop()}`
      let baseString;

      if ($('#btnAddArquivo').prop('disabled')) {
        baseString = await uploadCamera();
      } else if ($('#btnCamera').prop('disabled')) {
        let file = document.querySelector('#mdModalUpload').files[0];
        let reader = new FileReader();
        reader.onloadend = function () {
          baseString = { arquivo: reader.result, type: file.type }
        };
        reader.readAsDataURL(file);
      }

      let response = await requisicao('GET', '/sisplan/funcoes/v1/caminhoanexos?', null);
      jsonStr = await response.json();
      if (response.status != 200) {
        $("#imgAnexo").attr('src', `${BASE_URI}/dist/img/prod-1.png`);
        throw msgAlerta(jsonStr.mensagem);
      }

      let pastaAnexos = jsonStr.mensagem;

      response = await requisicao('POST', '/sisplan/funcoes/v1/anexoarquivo?',
        `DIRETORIO=${pastaAnexos}&TELA=${sTela}&CHAVE=${encodeURIComponent(sChave)}&ARQUIVO=${sArquivo}&`,
        `SBASE64=${encodeURIComponent(baseString.arquivo)}&FILETYPE=${baseString.type}`);

      if (sTela == 'CAIXA') {
        await buscaAnexo(sChave, sTela, $('#dtCadastro').val());
      } else {
        await buscaAnexo(sChave, sTela);
      }

      mostraBotaoIncluir();
      mostraBotaoAlterar();
    } catch (error) {
      console.error(error);
    } finally {
      $.LoadingOverlay("hide");
    }
  }

  async function uploadCamera() {
    return { arquivo: imgElement.src, type: 'image/jpeg' }
  }

  async function bloqueiaCampos() {
    $('#txtOrdemAnexo').attr("disabled", true);
    $('#txtOrdemAnexo').attr('readonly', true);
    $('#dtValidade').attr('disabled', true);
    $('#dtValidade').attr('readonly', true);
    $('#txtDescricao').attr('disabled', true);
    $('#txtDescricao').attr('readonly', true);
    $('#btnDocumento').attr('disabled', true);
    $('#btnAddArquivo').attr('disabled', true);
    $('#btnAddArquivo').attr('readonly', true);
    $('#btnCamera').attr('disabled', true);
    $('#btnLimpaDocumento').attr('disabled', true);
    $('#btnLimpaDocumento').attr('readonly', true);
    $('.botaoOpcoes').attr('disabled', false)
    $('.botaoOpcoes').attr('readonly', false)
    $('.botaoOpcoes').attr('disabled', false);
    $('.botaoOpcoes').attr('readonly', false);
  };

  async function desbloqueiaCampos() {
    $('#txtOrdemAnexo').attr("disabled", false);
    $('#txtOrdemAnexo').attr('readonly', false);
    $('#dtValidade').attr('disabled', false);
    $('#dtValidade').attr('readonly', false);
    $('#txtDescricao').attr('disabled', false);
    $('#txtDescricao').attr('readonly', false);
    $('#btnAddArquivo').attr('disabled', false);
    $('#btnAddArquivo').attr('readonly', false);
    $('#btnCamera').attr('disabled', false);
    $('.botaoOpcoes').attr('disabled', true)
    $('.botaoOpcoes').attr('readonly', true)
    $('.botaoOpcoes').attr('disabled', true);
    $('.botaoOpcoes').attr('readonly', true);
  };

  //Faz a pesquisa dos anexos vinculados a essa chave
  async function buscaAnexo(sChave, sTela, dtCadastro = '') {
    where = ''
    where += `CAMPO_CHAVE = '${sChave}' `
    where += ` AND TELA='${sTela}' `
    where += ` AND EMP_PAT='${getCookie('g_empresa_logada')}'`
    if (dtCadastro) {
      where += `AND DATA = '${dtCadastro}'`
    }

    const pesquisaParam = {
      tabela: "ANEXO",
      camposSelect: [
        "ANEXO.TELA",
        "ANEXO.ARQUIVO",
        "ANEXO.DESCRICAO",
        "ANEXO.DATA",
        "ANEXO.CAMPO_CHAVE",
        "ANEXO.ORDEM",
        "ANEXO.DT_VALIDADE",
        "ANEXO.USUARIO",
        "USUARIO.NOME"
      ],
      leftJoin: [
        { tabela: 'ACESSO_USUARIOS', alias: "USUARIO", condicao: 'USUARIO.CODIGO = ANEXO.USUARIO' },
      ],
      where: [where]
    };
    const jsonStr = await retornaJsonPesquisaPadrao(encodeURIComponent(JSON.stringify(pesquisaParam)));

    $("#tabelaAnexo").DataTable({
      destroy: true,
      order: false,
      search: false,
      filter: false,
      lengthChange: false,
      serverside: false,
      autoWidth: true,
      data: jsonStr,
      columns: [
        {
          data: "TELA",
          title: "TELA"
        },
        {
          data: "ARQUIVO",
          title: "ARQUIVO"
        },
        {
          data: "DESCRICAO",
          title: "DESCRICAO"
        },
        {
          data: "DATA",
          title: "DATA"
        },
        {
          data: "CAMPO_CHAVE",
          title: "CHAVE"
        },
        {
          data: "ORDEM",
          title: "ORDEM"
        },
        {
          data: "DT_VALIDADE",
          title: "DT_VALIDADE"
        },
        {
          data: "USUARIO",
          title: "USUARIO"
        },
        {
          data: "NOME",
          title: "NOME"
        },
      ],
      columnDefs: [
        {
          targets: 9,
          data: null,
          className: "tdBtnOpcoes",
          defaultContent: retornaBotaoOpcoes(),
        },
        {
          type: 'date-br',
          targets: [3, 6],
          render: function (data) {
            if (data != undefined && data != '') {
              const x = data.slice(0, 10).split('-');
              const hora = data.split(' ')[1];
              if (x[2]) {
                return `${x[2]}/${x[1]}/${x[0]}`;
              } else {
                return `${x} ${hora}`;
              }
            } else {
              return '';
            }
          }
        },
      ],
    });
  }

  function limpaCampos(sOrdem) {
    $('#txtArquivo').val('');
    $('#txtDescricao').val('');
    $('#txtDocumento').val('');
    $('#txtOrdemAnexo').val(sOrdem);
    $('#txtArquivo').val();
    $("#imgAnexo").attr('src', `${BASE_URI}/dist/img/prod-1.png`);
    $("#tabelaAnexo").dataTable().$("tr.selected").removeClass("selected");
  };

  //Altualiza os inputs de acordo com os registros da linha selecionada
  async function mostraLinhaSelecionada(data) {
    $('#txtChave').val(data.CAMPO_CHAVE);
    $('#txtTela').val(data.TELA);
    $('#txtOrdemAnexo').val(data.ORDEM);
    $('#txtUsuario').val(data.USUARIO);
    await buscaDataRegistro(data.CAMPO_CHAVE, data.ORDEM)
    $('#txtArquivo').val(data.ARQUIVO);
    $('#txtDescricao').val(data.DESCRICAO);
    $('#txtDocumento').val(data.DOCUMENTO);
  }

  //Busca qual a última ordem cadastrada e soma + 5.
  async function findLastOrder() {
    const sChave = $('#txtChave').val();
    const sTela = $('#txtTela').val();

    const pesquisaParam = {
      tabela: "ANEXO",
      camposSelect: [
        "MAX(ORDEM) ORDEM",
      ],
      where: [`TELA = '${sTela}' AND CAMPO_CHAVE = '${sChave}' `]
    };

    const jsonStr = await retornaJsonPesquisaPadrao(encodeURIComponent(JSON.stringify(pesquisaParam)));

    return jsonStr[0].ORDEM + 5;
  }

  async function buscaDataRegistro(sChave, sOrdem) {
    const pesquisaParam = {
      tabela: "ANEXO",
      camposSelect: [
        "DATA, DT_VALIDADE",
      ],
      where: [`CAMPO_CHAVE = '${sChave}' AND ORDEM = '${sOrdem}'`]
    };

    const jsonStr = await retornaJsonPesquisaPadrao(encodeURIComponent(JSON.stringify(pesquisaParam)));
    $('#dtCadastro').val(jsonStr[0].DATA.substr(0, 10));
    $('#dtValidade').val(jsonStr[0].DT_VALIDADE.substr(0, 10));
  }

  //Verifica se a ordem já existe
  async function orderExists(sOrdem) {
    const sTela = $('#txtTela').val();
    const sChave = $('#txtChave').val();

    const pesquisaParam = {
      tabela: "ANEXO",
      camposSelect: [
        "ORDEM",
      ],
      where: [`TELA = '${sTela}' AND CAMPO_CHAVE = '${sChave}' AND ORDEM = ${sOrdem} `]
    };

    const jsonStr = await retornaJsonPesquisaPadrao(encodeURIComponent(JSON.stringify(pesquisaParam)));

    if (jsonStr.length > 0) {
      return false;
    }
    return true;
  }

  //Insere botão excluir ao final de toda linha carregada
  function retornaBotaoOpcoes() {
    return '<div class="divBtnOpcoes" style="background:var(--primary-color); border:none !important; padding: 6px 7px;"> ' +
      '    <a href="" id="anchorDownload" download><button class="botaoOpcoes pr-2 d-none" id="btnDownloadTrigger" type="button"><span class="fas fa-download" style="color:green"></span></button></a>' +
      '    <button class="botaoOpcoes pr-2" id="btn-download" class="botaoOpcoes" type="button"><span class="fas fa-download" style="color:white"></span></button>' +
      '    <button class="botaoOpcoes pl-2" id="btn-excluir" class="botaoOpcoes" type="button"><span class="fas fa-trash-alt" style="color:white !important"></span></button>  ' +
      '   </div>';
  };

  //Função responsável por abrir o SaveDialog para fazermos upload das imagens
  $(async function () {
    let idCampo = '';
    var modalUploadAnexos = $("#mdModalUpload");
    var Anexo = $('#txtArquivo');
    var BotaoAnexo = $("#btnAddArquivo");

    BotaoAnexo.click(function () {
      modalUploadAnexos.click();
    });

    modalUploadAnexos.change(async function () {
      var NomeAnexo = $(this).val().split('\\')[$(this).val().split('\\').length - 1];
      Anexo.val(NomeAnexo);

      let dadosArquivo = document.querySelector('#mdModalUpload').files[0].type
      if (dadosArquivo.slice(0, 5) == 'video' || dadosArquivo.slice(0, 5) == 'audio') {
        idTag = '#idVideo'
        $('#imgAnexo').addClass('d-none');
        $('#idVideo').removeClass('d-none');
        $('#idVideo').attr('type', 'video/mp4');
        $('#btnCamera').attr('disabled', true)
      } else if (dadosArquivo.slice(0, 5) == 'image') {
        idTag = '#imgAnexo'
        $('#imgAnexo').removeClass('d-none');
        $('#idVideo').addClass('d-none');
        $('#btnCamera').attr('disabled', true)
      } else {
        idTag = '#imgAnexo'
        $('#imgAnexo').removeClass('d-none');
        $('#idVideo').addClass('d-none');
        $("#imgAnexo").attr('src', `${BASE_URI}/dist/img/prod-1.png`);
        $('#btnCamera').attr('disabled', true)
        return;
      }

      let fileAnexo = document.querySelector('#mdModalUpload').files[0];
      let readerAnexo = new FileReader();
      let baseStringAnexo;
      readerAnexo.onloadend = function () {
        baseStringAnexo = readerAnexo.result;
        $(idTag).attr('src', baseStringAnexo);
      };
      await readerAnexo.readAsDataURL(fileAnexo);
    });
  });

  $('#btnTeste').on('click', function () {
    $('#btnCamera').attr('disabled', false)
  })

  //Busca a foto dentro da pasta anexos, se não insere imagem padrão
  async function buscaFoto(sFoto, sExtensao) {
    const sTela = $('#txtTela').val().toUpperCase();
    const sChave = $('#txtChave').val();
    const url = `/Sisplan/Funcoes/v1/AnexoArquivo?ARQUIVO=${sFoto}&TELA=${sTela}&CHAVE=${encodeURIComponent(sChave)}&`

    requisicao('GET', url, null)
      .then(response => {
        if (!response.ok) {
          return response.json().then(json => Promise.reject(json.mensagem));
        }
        return response.json();
      })
      .then(json => {
        const sBase64 = json.mensagem;
        const imgAnexo = $('#imgAnexo');
        const idVideo = $('#idVideo');

        if (['mp4', 'mp3', 'wav', 'ogg'].includes(sExtensao)) {
          imgAnexo.addClass('d-none');
          idVideo.removeClass('d-none').attr({
            type: 'video/mp4',
            src: `data:video/mp4;base64,${sBase64}`
          });
        } else if (['pdf', 'txt'].includes(sExtensao)) {
          imgAnexo.attr('src', `${BASE_URI}/dist/img/prod-1.png`);
        } else {
          imgAnexo.removeClass('d-none').attr('src', `data:image/png;base64,${sBase64}`);
          idVideo.addClass('d-none');
        }
      })
      .catch(error => {
        console.error(error);
        msgAlerta(error)
        $('#imgAnexo').attr('src', `${BASE_URI}/dist/img/prod-1.png`);
      });
  }

  $("#tabelaAnexo tbody").on("click", "tr", async function (e) {
    if (($(e.target).is("span") || $(e.target).closest("span").length > 0) || $(e.target).hasClass('divBtnOpcoes') || $(e.target).is("button")) {
      return;
    }
    const data = $('#tabelaAnexo').DataTable().row($(this)).data();
    const extensao = $('#tabelaAnexo').DataTable().row($(this)).data().ARQUIVO.split('.')[1]
    if (data == undefined) {
      return
    }
    await mostraLinhaSelecionada(data);
    await buscaFoto(data.ARQUIVO, extensao);

  });

  $('#btnCamera').on('click', async function () {
    await pararCamera();
    $('#btnAddArquivo').attr('disabled', true);
    iniciaCamera();
    $('#modalCamera').modal('show');
  });

  $('#modalCamera').on('hide.bs.model', async function () {
    await pararCamera();
  });

  $('#modalCamera').on('show.bs.modal', function () {
    $('#canvas').addClass('d-none');
    $('#video').removeClass('d-none');

    $('#btnTiraFoto').removeClass('d-none');
    $('#btnBaixarFoto').addClass('d-none');
    $('#btnViraCamera').removeClass('d-none');
    $('#btnTentarNovamente').addClass('d-none');
  });

  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const botaoTiraFoto = document.getElementById('btnTiraFoto');
  const imgElement = document.getElementById('imgAnexo');

  let switchCamera = 'user';

  const constrains = {
    video: {
      width: { min: 640, ideal: 640 },
      height: { min: 480, ideal: 480 },
      frameRate: { min: 30 },
      advanced: [
        { width: 640, height: 480 },
        { aspectRatio: { min: 8 / 5, max: 8 / 5 } },
      ]
    }
  };

  $('#btnViraCamera').on('click', async function () {
    switchCamera = (switchCamera === 'environment') ? 'user' : 'environment';
    constrains.video.facingMode = switchCamera;
    await pararCamera();
    iniciaCamera();
  });

  async function pararCamera() {
    if (window.stream) {
      const tracks = window.stream.getTracks();

      tracks.forEach(track => {
        track.stop();
      });

      video.srcObject = null
    }
  }

  function handleSuccess(stream) {
    window.stream = stream;
    video.srcObject = stream;
  }

  var context = canvas.getContext('2d');
  botaoTiraFoto.addEventListener('click', function () {
    context.drawImage(video, 0, 0, 640, 480)
    $('#video').addClass('d-none')
    $('#canvas').removeClass('d-none')

    $('#btnTiraFoto').addClass('d-none')
    $('#btnBaixarFoto').removeClass('d-none')
    $('#btnViraCamera').addClass('d-none')
    $('#btnTentarNovamente').removeClass('d-none')
  });

  $('#btnBaixarFoto').on('click', async function () {
    $('#modalCamera').modal('hide');
    const dataURL = canvas.toDataURL('image/jpeg');
    $('#txtArquivo').val(`foto (${$('#txtOrdemAnexo').val()}).jpg`)
    // const a = document.createElement('a');
    // a.href = dataURL;
    // a.download = 'foto.jpg';
    // a.click();
    imgElement.src = dataURL;
  });

  $('#btnTentarNovamente').on('click', function () {
    $('#canvas').addClass('d-none')
    $('#video').removeClass('d-none');

    $('#btnTiraFoto').removeClass('d-none');
    $('#btnBaixarFoto').addClass('d-none');
    $('#btnViraCamera').removeClass('d-none');
    $('#btnTentarNovamente').addClass('d-none');
  });

  async function iniciaCamera() {
    try {
      navigator.mediaDevices.getUserMedia(constrains)
        .then((stream => {
          handleSuccess(stream);
        }))

      // const [track] = stream.getVideoTracks();

      // const { width, height, aspectRatio } = track.getSettings();

      // if (width < height) {
      //   [width, height] = [height, width];
      //   aspectRatio = 1 / aspectRatio;
      // }

      // await track.applyConstraints({
      //   resizeMode: 'crop-and-scale',
      //   width: { exact: width },
      //   height: { exact: height },
      //   frameRate: { exact: 10 },
      //   aspectRatio,
      // });

    } catch (e) {
      console.log(e);
      $('#modalCamera').modal('hide');
      msgAlerta('Não foi possível acessar a câmera, verifique!');
    }
  }
});