ConceptPortal-public/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx

import { useMemo, useState } from 'react';

import { useConceptTheme } from '../../../context/ThemeContext';
import { IConstituenta, IRSForm } from '../../../models/rsform';
import ConstituentsSearch from './ConstituentsSearch';
import ConstituentsTable from './ConstituentsTable';

// Height that should be left to accomodate navigation panel + bottom margin
const LOCAL_NAVIGATION_H = '2.1rem';

// Window width cutoff for expression show
const COLUMN_EXPRESSION_HIDE_THRESHOLD = 1500;

interface ViewConstituentsProps {
  expression: string
  baseHeight: string
  activeID?: number
  schema?: IRSForm
  onOpenEdit: (cstID: number) => void
}

function ViewConstituents({ expression, baseHeight, schema, activeID, onOpenEdit }: ViewConstituentsProps) {
  const { noNavigation } = useConceptTheme();
  
  const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []);

  const maxHeight = useMemo(
  () => {
    const siblingHeight = `${baseHeight} - ${LOCAL_NAVIGATION_H}`
    return (noNavigation ? 
      `calc(min(100vh - 8.2rem, ${siblingHeight}))`
    : `calc(min(100vh - 11.7rem, ${siblingHeight}))`);
  }, [noNavigation, baseHeight]);

  return (<>
    <ConstituentsSearch 
      schema={schema}
      activeID={activeID}
      activeExpression={expression}
      setFiltered={setFilteredData}
    />
    <div className='overflow-y-auto text-sm overscroll-none' style={{maxHeight : `${maxHeight}`}}>
    <ConstituentsTable 
      items={filteredData}
      activeID={activeID}
      onOpenEdit={onOpenEdit}
      denseThreshold={COLUMN_EXPRESSION_HIDE_THRESHOLD}
    />
    </div>
  </>);
}

export default ViewConstituents;