import React from 'react';
import { StyleSheet, View, ViewProps } from 'react-native';

export interface POSPaperProps extends ViewProps {
  paperColor?: 'white' | 'yellow';
  topBottomColor?: string;
}

/**
 * Virtual Paper to render elements generated by {@link PreviewEncoder}
 *
 * @param props Any View PropProps
 * @returns A Virtual Paper
 */
export const VirtualPaper: React.FC<POSPaperProps> = ({
  children,
  style,
  paperColor = 'white',
  topBottomColor = '#bfbb8f',
  ...props
}) => {
  return (
    <View
      {...props}
      style={[
        styles.container,
        style,
        { backgroundColor: paperColor === 'yellow' ? '#fff9c2' : '#ffffff' },
      ]}
    >
      <View style={[styles.jagged, { top: 0 }]}>
        {new Array(30).fill(0).map((_, index) => (
          <View key={index}>
            <View
              style={[styles.triangle, { borderBottomColor: topBottomColor }]}
            />
          </View>
        ))}
      </View>
      <View style={styles.contentContainer}>{children}</View>
      <View style={[styles.jagged, , { bottom: 0 }]}>
        {new Array(30).fill(0).map((_, index) => (
          <View
            key={'jagged-triangle-down' + index}
            style={{ transform: [{ rotate: '180deg' }] }}
          >
            <View
              style={[styles.triangle, { borderBottomColor: topBottomColor }]}
            />
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    alignSelf: 'stretch',
  },
  contentContainer: {
    width: '100%',
    paddingVertical: 30,
    transform: [{ scale: 0.9 }],
    overflow: 'hidden',
  },
  triangle: {
    width: 0,
    height: 0,
    marginHorizontal: -5,
    backgroundColor: 'transparent',
    borderStyle: 'dashed',
    borderTopWidth: 0,
    borderRightWidth: 12,
    borderBottomWidth: 18,
    borderLeftWidth: 12,
    borderTopColor: 'transparent',
    borderRightColor: 'transparent',
    borderLeftColor: 'transparent',
    transform: [{ rotate: '180deg' }],
  },
  jagged: {
    position: 'absolute',

    flexDirection: 'row',
    width: '100%',
    justifyContent: 'center',
    zIndex: 2,
  },
});