File size: 4,411 Bytes
9e7c650
 
1426bed
 
33a1b4a
1426bed
 
 
 
33a1b4a
1426bed
 
 
 
 
 
9e7c650
 
 
 
 
1426bed
 
33a1b4a
9e7c650
 
1426bed
 
9e7c650
33a1b4a
9e7c650
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33a1b4a
 
9e7c650
 
 
 
33a1b4a
1426bed
 
9e7c650
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1426bed
 
33a1b4a
 
 
9e7c650
 
33a1b4a
9e7c650
33a1b4a
1426bed
 
 
 
 
 
9e7c650
 
 
 
 
1426bed
 
33a1b4a
 
 
 
1426bed
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { getModelosSubtabKeyFromSlug, getModelosSubtabSlugFromKey } from '../deepLinks'
import PesquisaTab from './PesquisaTab'
import RepositorioTab from './RepositorioTab'
import VisaoGeralTab from './VisaoGeralTab'

const SUBTABS = [
  { key: 'Pesquisar Modelos', label: 'Pesquisar Modelos' },
  { key: 'Reposit贸rio de Modelos', label: 'Reposit贸rio de Modelos' },
  { key: 'Vis茫o Geral', label: 'Vis茫o Geral' },
]

export default function ModelosEstatisticosTab({
  sessionId,
  authUser,
  onUsarModeloEmAvaliacao,
  onEditarModeloEmElaboracao = null,
  onAbrirModeloNoRepositorio = null,
  routeRequest = null,
  onRouteChange = null,
  onModoImersivoChange = null,
}) {
  const [activeSubtab, setActiveSubtab] = useState('Pesquisar Modelos')
  const [pesquisaMapaScrollRequest, setPesquisaMapaScrollRequest] = useState(null)
  const [repositorioModeloAberto, setRepositorioModeloAberto] = useState(false)
  const handledRouteRequestRef = useRef('')

  useEffect(() => {
    const requestKey = String(routeRequest?.requestKey || '').trim()
    if (!requestKey) return
    if (handledRouteRequestRef.current === requestKey) return
    handledRouteRequestRef.current = requestKey

    const nextSubtab = getModelosSubtabKeyFromSlug(routeRequest?.subtab)
    setActiveSubtab(routeRequest?.modeloId ? 'Reposit贸rio de Modelos' : nextSubtab)

    if (routeRequest?.scrollToMapa) {
      setPesquisaMapaScrollRequest({ requestKey })
    }
  }, [routeRequest])

  const pesquisaRouteRequest = useMemo(() => {
    const requestKey = String(routeRequest?.requestKey || '').trim()
    if (!requestKey) return null
    if (String(routeRequest?.subtab || '').trim() !== 'pesquisa') return null
    return routeRequest
  }, [routeRequest])

  const repositorioOpenRequest = useMemo(() => {
    const requestKey = String(routeRequest?.requestKey || '').trim()
    const modeloId = String(routeRequest?.modeloId || '').trim()
    if (!requestKey || !modeloId) return null
    return {
      requestKey,
      modeloId,
      modelTab: routeRequest?.modelTab || 'mapa',
      nomeModelo: routeRequest?.nomeModelo || modeloId,
      modeloArquivo: routeRequest?.modeloArquivo || '',
      returnIntent: routeRequest?.returnIntent || null,
    }
  }, [routeRequest])

  useEffect(() => {
    if (typeof onModoImersivoChange !== 'function') return undefined
    onModoImersivoChange(repositorioModeloAberto)
    return () => onModoImersivoChange(false)
  }, [repositorioModeloAberto, onModoImersivoChange])

  return (
    <div className="tab-content">
      {!repositorioModeloAberto ? (
        <div className="inner-tabs" role="tablist" aria-label="Abas de modelos estat铆sticos">
          {SUBTABS.map((tab) => (
            <button
              key={tab.key}
              type="button"
              className={activeSubtab === tab.key ? 'inner-tab-pill active' : 'inner-tab-pill'}
              onClick={() => {
                setActiveSubtab(tab.key)
                if (typeof onRouteChange === 'function') {
                  onRouteChange({
                    tab: 'modelos',
                    subtab: getModelosSubtabSlugFromKey(tab.key),
                  })
                }
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
      ) : null}

      <div className="tab-pane" hidden={activeSubtab !== 'Pesquisar Modelos'}>
        <PesquisaTab
          sessionId={sessionId}
          onUsarModeloEmAvaliacao={onUsarModeloEmAvaliacao}
          onAbrirModeloNoRepositorio={onAbrirModeloNoRepositorio}
          routeRequest={pesquisaRouteRequest}
          scrollToMapaRequest={pesquisaMapaScrollRequest}
          onRouteChange={onRouteChange}
        />
      </div>

      <div className="tab-pane" hidden={activeSubtab !== 'Reposit贸rio de Modelos'}>
        <RepositorioTab
          authUser={authUser}
          sessionId={sessionId}
          openModeloRequest={repositorioOpenRequest}
          onUsarModeloEmAvaliacao={onUsarModeloEmAvaliacao}
          onEditarModeloEmElaboracao={onEditarModeloEmElaboracao}
          onRouteChange={onRouteChange}
          onModeloAbertoChange={setRepositorioModeloAberto}
        />
      </div>

      <div className="tab-pane" hidden={activeSubtab !== 'Vis茫o Geral'}>
        <VisaoGeralTab />
      </div>
    </div>
  )
}