import React, { useContext } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Dimensions, StyleSheet, View } from 'react-native';
import { ApplicationContext } from '../Context';
import { Colors, Spacing } from '../Consts';
import { GridContextProps } from './types';
import { useGridSystem } from './utils';

const GridSystem: React.FC<any> = ({
  width = Dimensions.get('window').width,
  useMargin = true,
  gutterSize = Spacing.M,
  screenGrid = true,
  gridColor = Colors.blue_07,
}) => {
  const { theme } = useContext(ApplicationContext);
  const { numberOfColumns } = useGridSystem();

  const margin = useMargin ? Spacing.M : 0;
  const widthSection = width - margin * 2;
  const totalGutterSize = gutterSize * (numberOfColumns - 1);
  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;

  const grid: GridContextProps = {
    numberOfColumns,
    gutterSize,
    sizePerSpan,
    getSizeSpan: span => {
      return span * sizePerSpan + (span - 1) * gutterSize;
    },
  };
  const insets = useSafeAreaInsets();

  const list: number[] = [];
  for (let i = 1; i <= grid.numberOfColumns; i++) {
    list.push(i);
  }

  return (
    <>
      <View
        pointerEvents="none"
        style={[
          styles.gridContainer,
          screenGrid && insets,
          {
            borderColor: theme.colors.error.primary,
            marginHorizontal: margin,
            top: Spacing.M,
            bottom: Spacing.M,
          },
        ]}
      >
        {list.map((_, index) => {
          return (
            <View style={{ flexDirection: 'row' }} key={index.toString()}>
              {index !== 0 && <View style={{ width: grid.gutterSize }} />}
              <View
                key={`Grid${index.toString()}`}
                pointerEvents="none"
                style={[
                  styles.gridColumn,
                  {
                    width: grid.sizePerSpan,
                    backgroundColor: gridColor,
                  },
                ]}
              />
            </View>
          );
        })}
      </View>
      {screenGrid && (
        <>
          <View pointerEvents="none" style={styles.dangerLeftContainer} />
          <View pointerEvents="none" style={styles.dangerRightContainer} />
          <View
            pointerEvents="none"
            style={[styles.dangerTopContainer, { height: Spacing.M }]}
          />
          <View
            pointerEvents="none"
            style={[styles.dangerBottomContainer, { height: insets.bottom }]}
          />
        </>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  gridContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    borderWidth: 1,
  },
  gridColumn: {
    height: '100%',
    opacity: 0.2,
  },
  dangerTopContainer: {
    opacity: 0.2,
    backgroundColor: Colors.red_03,
    width: '100%',
    top: 0,
    position: 'absolute',
  },
  dangerBottomContainer: {
    opacity: 0.2,
    backgroundColor: Colors.red_03,
    width: '100%',
    bottom: 0,
    position: 'absolute',
  },
  dangerLeftContainer: {
    opacity: 0.2,
    backgroundColor: Colors.red_03,
    width: Spacing.M,
    height: '100%',
    left: 0,
    position: 'absolute',
  },
  dangerRightContainer: {
    opacity: 0.2,
    backgroundColor: Colors.red_03,
    width: Spacing.M,
    height: '100%',
    right: 0,
    position: 'absolute',
  },
});

export default GridSystem;