import { useCallback, useMemo, useState } from 'react';
import type { LayoutChangeEvent } from 'react-native';

import { useTheme } from '../../../../theme';

export const useCalendarLayout = () => {
  const theme = useTheme();

  const [contentHeight, setContentHeight] = useState(0);
  const calendarItemHeight =
    contentHeight - theme.__hd__.calendar.space.iosPickerMarginVertical * 2;

  const [contentWidth, setContentWidth] = useState(0);
  const calendarItemWidth = useMemo(
    () =>
      contentWidth > 0
        ? Math.floor(
            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
          )
        : undefined,
    [contentWidth, theme]
  );

  const onLayout = useCallback((e: LayoutChangeEvent) => {
    const { width, height } = e.nativeEvent.layout;
    setContentHeight(height);
    setContentWidth(width);
  }, []);

  return {
    onLayout,
    contentHeight,
    calendarItemHeight,
    contentWidth,
    calendarItemWidth,
  };
};