import React, { Component } from 'react';
import { View, StyleSheet, StyleProp, TextStyle, ViewStyle } from 'react-native';
import { Cell } from './cell';
import { sum } from '../utils';

type RowProps = {
  data: any[];
  widthArr?: number[];
  height?: number;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  flexArr?: number[];
  testID?: string;
};

export class Row extends Component<RowProps> {
  render() {
    const { data, style, widthArr, height, flexArr, textStyle, testID, ...props } = this.props;
    let width = widthArr ? sum(widthArr) : 0;

    return data ? (
      <View testID={testID} style={[height ? { height } : {}, width ? { width } : {}, styles.row, style]}>
        {data.map((item, i) => {
          const flex = flexArr && flexArr[i];
          const wth = widthArr && widthArr[i];
          return <Cell key={i} data={item} width={wth} height={height} flex={flex} textStyle={textStyle} {...props} />;
        })}
      </View>
    ) : null;
  }
}

type RowsProps = {
  data: any[];
  widthArr: number[];
  style: StyleProp<ViewStyle>;
  textStyle: StyleProp<TextStyle>;
  flexArr: number[];
  heightArr: number[];
  testID?: string;
};

export class Rows extends Component<RowsProps> {

  render() {
    const { data, style, widthArr, heightArr, flexArr, textStyle, testID, ...props } = this.props;
    const flex = flexArr ? sum(flexArr) : 0;
    const width = widthArr ? sum(widthArr) : 0;

    return data ? (
      <View testID={testID} style={[flex ? { flex } : {}, width ? { width } : {}]}>
        {data.map((item, i) => {
          const height = heightArr && heightArr[i];
          return (
            <Row
              key={i}
              data={item}
              widthArr={widthArr}
              height={height}
              flexArr={flexArr}
              style={style}
              textStyle={textStyle}
              {...props}
            />
          );
        })}
      </View>
    ) : null;
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    overflow: 'hidden'
  }
});