import React, { useMemo, memo, useState, useCallback } from 'react';
import type { ViewStyle, StyleProp, LayoutChangeEvent } from 'react-native';
import { View } from 'react-native';

import RowContext from './context';
import type { RowProps } from './interface';
import STYLES from './style';

/**
 * Row 布局
 * @description 一组单元格。
 */
const Row: React.FC<RowProps> = ({
  gap = 0,
  style,
  justify,
  align,
  ...restProps
}) => {
  const ctx = useMemo(() => ({ gap }), [gap]);
  const rowStyles: StyleProp<ViewStyle> = [
    STYLES.row,
    {
      marginHorizontal: -(+gap / 2),
      justifyContent: justify,
      alignItems: align,
    },
    style,
    // to test ui
    // {
    //   backgroundColor: '#666',
    // },
  ];

  // console.log(-(+gutter / 2));

  return (
    <RowContext.Provider value={ctx}>
      <View {...restProps} style={rowStyles} />
    </RowContext.Provider>
  );
};

interface AdaptiveRowProps extends RowProps {}

/**
 * 自适应宽度的 Row 组件
 * 使用 onLayout 自动获取容器宽度，解决嵌套 Popup 中宽度为 0 的问题
 *
 * @example
 * <AdaptiveRow gap={8}>
 *   <Col span={12}><Input /></Col>
 *   <Col span={12}><Select /></Col>
 * </AdaptiveRow>
 */
const AdaptiveRow = (props: AdaptiveRowProps) => {
  const { gap = 0, style, children, ...restRowProps } = props;
  const [width, setWidth] = useState(0);

  const handleLayout = useCallback((event: LayoutChangeEvent) => {
    const { width: layoutWidth } = event.nativeEvent.layout;
    if (layoutWidth > 0) {
      setWidth(layoutWidth);
    }
  }, []);

  return (
    <View onLayout={handleLayout} style={[{ width: '100%' }, style]}>
      {width > 0 ? (
        <Row gap={gap} style={{ width }} {...restRowProps}>
          {children}
        </Row>
      ) : null}
    </View>
  );
};

export default memo(AdaptiveRow);