import React, { useContext, useEffect } from 'react';
import { Table } from 'antd';
import PropTypes from 'prop-types';
import { GlobalContext } from '../../../Store'; 

const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,pagination}) => {
  
  const { state } = useContext(GlobalContext);

  useEffect(() => {}, [state.theme.colors]);

  // Header styling
  const headerStyle = {
    backgroundColor: state.theme.colors.tableHeaderBg,
    color: state.theme.colors.tableHeaderText,
    fontWeight: 'bold',
    fontWeight: 600,
    fontSize: 12,
    lineHeight: '16px',
  
  };

 

  // Row styling (alternating colors with fallback)
  const getRowStyle = (index) => {
    const evenColor = state.theme.colors.tableRowEven;
    const oddColor = state.theme.colors.tableRowOdd;
    const textColor = state.theme.colors.tableText;

    /* `return { backgroundColor: index % 2 === 0 ? evenColor : oddColor, color:
  textColor };` is defining a function called `getRowStyle` that determines the styling for rows in
  a table component based on the index of the row. */
    return {
      backgroundColor: index % 2 === 0 ? evenColor : oddColor,
      color: textColor,
    };
  };
  columns.map((col) => ({
    ...col,
    onHeaderCell: () => ({
      style: {
        ...headerStyle,
        backgroundColor: state.theme.colors.tableHeaderBg, // Ensure background color for fixed columns
        
      },
    }),
    onCell: () => ({
      style: {
        backgroundColor: state.theme.colors.tableRowEven, // Ensuring row colors for fixed columns
      },
    }),
  }));
  

  // Apply fixed property to the columns you need
  const updatedColumns = columns.map((col) => ({
    ...col,
    onHeaderCell: () => ({
      style: headerStyle,
    }),
    fixed: col.fixed || null, // Apply fixed property if it's set in the column definition
  }));

  return (
    <Table
      //   columns={updatedColumns}
      scroll={scroll}
      dataSource={dataSource}
      loading={loading}
      bordered
      fixed={fixed}
      pagination={pagination}
      rowClassName={(record, index) => (index % 2 === 0 ? 'even-row' : 'odd-row')}
      onRow={(record, index) => ({
        style: getRowStyle(index),
      })}
      // Manually apply styles to fixed columns
      columns={updatedColumns.map((col) => ({
        ...col,
        onCell: (record, rowIndex) => ({
          style: getRowStyle(rowIndex), // Apply row style to individual cells in fixed columns
        }),
      }))}
      summary={summary}
    />
  );
};

TableComponent.propTypes = {
  columns: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
  loading: PropTypes.bool,
};

TableComponent.defaultProps = {
  loading: false,
};

export default TableComponent;
