import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Col, Rows } from 'react-native-tabeller';

export const ExampleFive: React.FC = () => {
  const alertIndex = (value: string): void => {
    Alert.alert(`This is column ${value}`);
  };
  const elementButton = (value: string): React.ReactElement => (
    <TouchableOpacity onPress={() => alertIndex(value)}>
      <View style={styles.btn}>
        <Text style={styles.btnText}>button</Text>
      </View>
    </TouchableOpacity>
  );

  const [tableHead] = useState<any[]>([
    '',
    elementButton('1'),
    elementButton('2'),
    elementButton('3'),
  ]);
  const [sideHead] = useState<string[]>(['H1', 'H2']);
  const [rowTitles] = useState<string[]>([
    'Title',
    'Title2',
    'Title3',
    'Title4',
  ]);

  // Table data - matching the structure in the screenshot
  const [tableData] = useState<string[][]>([
    ['a', '1', 'a'],
    ['b', '2', 'b'],
    ['c', '3', 'c'],
    ['d', '4', 'd'],
  ]);

  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}>
        {/* table header row with buttons */}
        <Row
          data={tableHead}
          style={styles.header}
          textStyle={styles.headerText}
          flexArr={[1, 1, 1, 1]}
        />
        <TableWrapper style={styles.wrapper}>
          {/* left column with H1, H2 */}
          <Col
            data={sideHead}
            style={styles.sideHeader}
            heightArr={[60, 60]}
            textStyle={styles.sideHeaderText}
          />
          <TableWrapper style={styles.tableContentWrapper}>
            {/* row titles column */}
            <Col
              data={rowTitles}
              style={styles.title}
              heightArr={[30, 30, 30, 30]}
              textStyle={styles.titleText}
            />
            {/* content cells */}
            <Rows
              data={tableData}
              style={styles.row}
              flexArr={[1, 1, 1]}
              textStyle={styles.text}
            />
          </TableWrapper>
        </TableWrapper>
      </Table>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff',
  },
  header: {
    height: 40,
    backgroundColor: '#fff',
  },
  headerText: {
    textAlign: 'center',
    fontWeight: '500',
  },
  wrapper: {
    flexDirection: 'row',
  },
  sideHeader: {
    width: 60,
    backgroundColor: '#C6F3E0',
  },
  sideHeaderText: {
    textAlign: 'center',
    fontWeight: '500',
  },
  tableContentWrapper: {
    flex: 1,
    flexDirection: 'row',
  },
  title: {
    width: 80,
    backgroundColor: '#f6f8fa',
  },
  titleText: {
    textAlign: 'left',
    paddingLeft: 5,
  },
  row: {
    height: 30,
  },
  text: {
    textAlign: 'center',
  },
  btn: {
    width: 58,
    height: 18,
    backgroundColor: '#c8e1ff',
    borderRadius: 2,
    alignSelf: 'center',
  },
  btnText: {
    textAlign: 'center',
    fontSize: 12,
  },
});

export default ExampleFive;