import React from 'react';
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import Example from '../../shared/example';

const log = (...msg) => {
  console.log(...msg);
};

const l1 = { width: '100%', paddingLeft: 0, paddingTop: 0 };
const l2 = { width: '75%', paddingLeft: 10, paddingTop: 10 };

function Box({ pointerEvents }) {
  return (
    <TouchableHighlight
      onPress={log}
      pointerEvents={pointerEvents}
      style={styles.box}
      underlayColor="purple"
    >
      <TouchableHighlight onPress={log} style={styles.content} underlayColor="orange">
        <Text>{pointerEvents}</Text>
      </TouchableHighlight>
    </TouchableHighlight>
  );
}

export default function ViewPage() {
  const [layoutInfo, setLayoutInfo] = React.useState({});
  const [layoutStyle, setLayoutStyle] = React.useState(l1);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setLayoutStyle((l) => (l.width === '100%' ? l2 : l1));
    }, 2500);
    return () => {
      clearInterval(interval);
    };
  }, []);

  const handleLayout = ({ nativeEvent }) => {
    setLayoutInfo(() => ({ ...nativeEvent.layout }));
  };

  return (
    <Example title="View">
      <View style={styles.container}>
        <Text accessibilityRole="heading" style={styles.heading}>
          onLayout
        </Text>
        <View>
          <View style={[styles.layoutContainer, layoutStyle]}>
            <View onLayout={handleLayout} style={styles.layoutBox} />
          </View>
          <Text>{JSON.stringify(layoutInfo, null, 2)}</Text>
        </View>

        <Text accessibilityRole="heading" style={styles.heading}>
          pointerEvents
        </Text>
        <View pointerEvents="box-none">
          <View pointerEvents="box-none" style={styles.boxContainer}>
            <Box pointerEvents="none" />
            <Box pointerEvents="auto" />
            <Box pointerEvents="box-only" />
            <Box pointerEvents="box-none" />
          </View>
        </View>
      </View>
    </Example>
  );
}

const styles = StyleSheet.create({
  container: {
    alignSelf: 'stretch',
    padding: 10
  },
  heading: {
    fontWeight: 'bold',
    marginVertical: '1rem'
  },
  layoutContainer: {
    marginBottom: '1rem'
  },
  layoutBox: {
    backgroundColor: '#FFAD1F',
    height: 50
  },
  boxContainer: {
    height: 50
  },
  box: {
    backgroundColor: '#ececec',
    padding: 30,
    marginVertical: 5
  },
  content: {
    backgroundColor: 'white',
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderStyle: 'solid'
  }
});

@@ -47,34 +47,25 @@
 , Text, 
-TouchableHighlight
+Pressable
 , View %7D
@@ -358,34 +358,25 @@
  (%0A    %3C
-TouchableHighlight
+Pressable
 %0A      o
@@ -441,48 +441,64 @@
 le=%7B
-styles.box%7D%0A      underlayColor=%22
+(%7B pressed %7D) =%3E %5Bstyles.box, pressed && styles.
 purple
-%22
+%5D%7D
 %0A   
@@ -507,34 +507,25 @@
 %0A      %3C
-TouchableHighlight
+Pressable
  onPress
@@ -542,46 +542,68 @@
 le=%7B
-styles.content%7D underlayColor=%22
+(%7B pressed %7D) =%3E %5Bstyles.content, pressed && styles.
 orange
-%22
+%5D%7D
 %3E%0A  
@@ -649,52 +649,34 @@
   %3C/
-TouchableHighlight%3E%0A    %3C/TouchableHighlight
+Pressable%3E%0A    %3C/Pressable
 %3E%0A  
@@ -2434,16 +2434,40 @@
 tical: 5
+,%0A    userSelect: 'none'
 %0A  %7D,%0A  
@@ -2594,16 +2594,134 @@
  'solid'
+,%0A    userSelect: 'none'%0A  %7D,%0A  orange: %7B%0A    backgroundColor: 'orange'%0A  %7D,%0A  purple: %7B%0A    backgroundColor: 'purple'
 %0A  %7D%0A%7D);

Fix pointerEvents example for View