import * as React from 'react';
import type { LayoutChangeEvent } from 'react-native';

export default function useLayout() {
  const [layout, setLayout] = React.useState<{
    height: number;
    width: number;
    measured: boolean;
  }>({ height: 0, width: 0, measured: false });

  const onLayout = React.useCallback(
    (e: LayoutChangeEvent) => {
      const { height, width } = e.nativeEvent.layout;

      if (height === layout.height && width === layout.width) {
        return;
      }

      setLayout({
        height,
        width,
        measured: true,
      });
    },
    [layout.height, layout.width]
  );

  return [layout, onLayout] as const;
}