import React from 'react';
import { View } from 'react-native';
import TableRow from './TableRow';
import type { TableProps } from './types';
import { Pressable } from 'react-native';

const Table = (viewProps: TableProps) => {
  const {
    header,
    data,
    columnsWidth,
    columnsAlign,
    borderColor = '#333',
    borderWidth = 1,
    containerStyle,
    headerStyle,
    headerTextStyle,
    rowStyle,
    textStyle,
    onRowPressed,
  } = viewProps;

  return (
    <View
      style={[
        {
          borderColor: borderColor,
          borderWidth: borderWidth,
          width: columnsWidth.reduce((pre, cur) => (pre += cur)) + borderWidth,
        },
        containerStyle,
      ]}
    >
      <TableRow
        data={header}
        isLastRow={false}
        columnsWidth={columnsWidth}
        borderColor={borderColor}
        borderWidth={borderWidth}
        style={[
          headerStyle,
          { borderBottomWidth: borderWidth, borderColor: borderColor },
        ]}
        textStyle={[textStyle, headerTextStyle]}
        columnsAlign={Array.from(Array(columnsWidth.length)).fill('center')}
      />

      {data.map((row, rowIndex) => {
        return (
          <Pressable key={rowIndex} onPress={() => onRowPressed?.(rowIndex)}>
            <TableRow
              isLastRow={rowIndex === data.length - 1}
              columnsWidth={columnsWidth}
              columnsAlign={columnsAlign}
              data={row}
              borderColor={borderColor}
              borderWidth={borderWidth}
              style={rowStyle}
              textStyle={textStyle}
            />
          </Pressable>
        );
      })}
    </View>
  );
};

export default Table;