// Table component
// --------------------------------------------------
import React from 'react'
import { View, StyleSheet } from 'react-native'

import { colors, spacing } from '../theme'
import Text from './Text'

const data = [
  ['column 1', 'column 2', 'column 3'],
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
]
const Table = ({
  data = data,
  tableConfig = {
    table: {
      width: '100%',
    },
    header: {
      color: colors.white,
      rounded: false,
      elevation: 0,
      backgroundColor: colors.n_200,
      align: 'center',
    },
    row: {
      color: colors.white,
      rounded: false,
      elevation: 0,
      backgroundColor: colors.white,
      borderColor: colors.n_200,
      borderBottomWidth: 1,
    },
  },
}) => {
  // const tableConfig = {
  //   header: {
  //     color: colors.white,
  //     rounded: false,
  //     elevation: 0,
  //     backgroundColor: colors.n_200,
  //     align: 'center',
  //   },
  //   row: {
  //     color: colors.white,
  //     rounded: false,
  //     elevation: 0,
  //     backgroundColor: colors.white,
  //     borderColor: colors.n_200,
  //     borderBottomWidth: 1,
  //   },
  // }

  // get column length
  const columnLength = data[0].length
  console.log(columnLength)
  return (
    <View
      style={[
        styles.table,
        {
          width: tableConfig.table.width,
        },
      ]}
    >
      {data.map((row, index) => (
        <View
          key={index}
          style={[
            styles.row,
            {
              backgroundColor: tableConfig.row.backgroundColor,
              borderRadius: tableConfig.row.rounded ? spacing.s_2 : 0,
              elevation: tableConfig.row.elevation,
              borderColor: tableConfig.row.borderColor,
              borderBottomWidth: tableConfig.row.borderBottomWidth,
            },
            index === 0 && {
              backgroundColor: tableConfig.header.backgroundColor,
              borderRadius: tableConfig.header.rounded ? spacing.s_2 : 0,
              elevation: tableConfig.header.elevation,
            },
          ]}
        >
          {row.map((column, index) => (
            <View
              key={index}
              style={[styles.column, { width: `${100 / columnLength}%` }]}
            >
              <Text style={[styles.columnContent]}>{column}</Text>
            </View>
          ))}
        </View>
      ))}
    </View>
  )
}

const styles = StyleSheet.create({
  table: {
    width: '100%',
    backgroundColor: colors.n_100,
  },
  header: {
    backgroundColor: colors.n_200,
    borderRadius: spacing.s_2,
    elevation: 0,
    padding: spacing.s_3,
    width: '100%',
  },
  row: {
    backgroundColor: colors.white,
    borderRadius: spacing.s_2,
    elevation: 0,
    padding: spacing.s_2,
    width: '100%',
    flexDirection: 'row',
  },
  column: {
    // width: '50%',
    padding: spacing.s_2,
  },
  columnContent: {
    textAlign: 'center',
  },
  // style the first row of the table
})

export default Table