import { useState } from 'react'

import { CountsLayoutContext, defaultCountWidths, MAX_COUNT_WIDTH, MIN_COUNT_WIDTH }
    from '@/lib/countsTableLayout'

import type { ReactNode } from 'react'


const CountsTableLayout = ({ children }: { children: ReactNode }) => {
  const [widths, setWidths] = useState<Record<string, number>> ({ })
  const width = (family: string, key: string) =>
      widths[`${family}/${key}`] ?? defaultCountWidths[key] ?? 160
  const resize = (family: string, key: string, value: number) => {
    const next = Math.round (Math.max (MIN_COUNT_WIDTH, Math.min (MAX_COUNT_WIDTH, value)))
    setWidths (previous => ({ ...previous, [`${family}/${key}`]: next }))
  }
  return (
      <CountsLayoutContext.Provider value={{ width, resize }}>
	{children}
      </CountsLayoutContext.Provider>)
}


export default CountsTableLayout