import React from 'react'
import { View, Text, Pressable, Platform, TextStyle } from 'react-native'
import { RunnerObject, LibraryComponentManifest } from 'types'

interface LibraryComponentErrorProps {
  object: RunnerObject
  onResetComponent: () => void
  manifest?: LibraryComponentManifest
}

const LibraryComponentError = ({
  object,
  onResetComponent,
  manifest,
}: LibraryComponentErrorProps) => {
  const { libraryName, componentName } = object.attributes
  const displayName = manifest?.displayName ?? `${libraryName}.${componentName}`
  const resetAction = Platform.OS === 'web' ? 'Click' : 'Tap'

  return (
    <Pressable onPress={onResetComponent}>
      <View style={styles.wrapper}>
        <Text style={styles.text}>Error rendering: {displayName}</Text>
        <Text style={[styles.text, styles.bold]}>{resetAction} to reset</Text>
      </View>
    </Pressable>
  )
}

LibraryComponentError.defaultProps = {
  manifest: null,
}

export default LibraryComponentError

const styles = {
  wrapper: {
    padding: 5,
    backgroundColor: '#fcc',
    borderColor: '#d00',
    borderWidth: 1,
  },
  text: {
    color: '#d00',
  },
  bold: {
    fontWeight: 'bold' as TextStyle['fontWeight'],
  },
}