text: // libraries
  import React, { useMemo } from 'react'
  import { Image, View } from 'react-native'
  
  // components
  import { noop } from 'lodash'
  import { Section } from '../index'
  import CustomButton from '../buttons/CustomButton'
  import RoundIconButton from '../buttons/RoundIconButton'
  
  // hooks
  import { useClipboardCopy } from '../../../lib/hooks/useClipboard'
  
  // utils
  import { withStyles } from '../../../lib/styles'
  import { getDesignRelativeHeight, getDesignRelativeWidth } from '../../../lib/utils/sizes'
  import { truncateMiddle } from '../../../lib/utils/string'
  
  const BorderedBox = ({
    styles,
    theme,
    image,
    imageSource,
    title,
    content,
    copyButtonText,
    truncateContent = false,
    imageSize = 68,
    showCopyIcon = true,
    onCopied = noop,
  }) => {
    const copyToClipboard = useClipboardCopy(content, onCopied)
    const displayContent = truncateContent ? truncateMiddle(content, 29) : content // 29 = 13 chars left side + 3 chars of '...' + 13 chars right side
  
    const avatarStyles = useMemo(() => {
      const imageBoxSize = getDesignRelativeHeight(imageSize, true)
      const halfBoxSize = Math.ceil(imageBoxSize / 2)
  
      return [
        styles.avatar,
        {
          width: imageBoxSize,
          height: imageBoxSize,
          borderRadius: halfBoxSize, // half of height/width
          top: -halfBoxSize, // half of height
        },
      ]
    }, [imageSize, styles.avatar])
  
    const lineSeparatorStyles = useMemo(
      () => [
        styles.avatarLineSeparator,
        {
          width: getDesignRelativeWidth(imageSize + 20, true),
        },
      ],
      [imageSize, styles.avatarLineSeparator],
    )
  
    const ImgComponent = image
    const imgSource = useMemo(() => imageSource && { uri: imageSource }, [imageSource])
  
    return (
      <View>
        <Section.Stack style={styles.borderedBox}>
          <View style={lineSeparatorStyles} />
          {imageSource ? (
            <Image source={imgSource} style={avatarStyles} />
          ) : image ? (
            <View style={avatarStyles}>
              <ImgComponent />
            </View>
          ) : null}
          <Section.Stack style={styles.boxContent}>
            <Section.Text fontSize={18} fontFamily="Roboto Slab" fontWeight="bold" style={styles.boxTitle}>
              {title}
            </Section.Text>
            <Section.Text fontSize={13} letterSpacing={0.07} color={theme.colors.lighterGray}>
              {displayContent}
            </Section.Text>
          </Section.Stack>
          <View style={[styles.copyIconLineSeparator, showCopyIcon ? null : styles.copyButtonLineSeparator]} />
        </Section.Stack>
        <View style={styles.boxCopyIconOuter}>
          <View style={[styles.boxCopyIconWrapper, showCopyIcon ? null : styles.boxCopyButtonWrapper]}>
            {showCopyIcon ? (
              <>
                <RoundIconButton
                  onPress={copyToClipboard}
                  iconSize={22}
                  iconName="copy"
                  style={styles.copyIconContainer}
                />
                <Section.Text fontSize={10} fontWeight="medium" color={theme.colors.primary}>
                  {copyButtonText}
                </Section.Text>
              </>
            ) : (
              <CustomButton onPress={copyToClipboard} style={styles.copyButtonContainer}>
                {copyButtonText}
              </CustomButton>
            )}
          </View>
        </View>
      </View>
    )
  }
  
  const styles = ({ theme }) => {
    const [height5, height40] = [5, 40].map(size => getDesignRelativeHeight(size, true))
    const height25 = Math.ceil(height5 / 2)
  
    return {
      boxContent: {
        marginTop: getDesignRelativeHeight(35, false),
        marginBottom: getDesignRelativeHeight(35, false),
        padding: 0,
      },
      borderedBox: {
        borderWidth: 1,
        borderStyle: 'solid',
        borderRadius: 5,
        display: 'flex',
        alignItems: 'center',
        position: 'relative',
        justifyContent: 'center',
        borderColor: theme.colors.gray50Percent,
        padding: 0,
      },
      boxTitle: {
        marginBottom: getDesignRelativeHeight(8, true),
      },
      avatarLineSeparator: {
        height: height5,
        top: -height25, // half of height
        backgroundColor: theme.colors.surface,
        position: 'absolute',
      },
      avatar: {
        position: 'absolute',
        zIndex: 1,
        alignItems: 'center',
      },
      boxCopyIconOuter: {
        width: '100%',
        height: height40,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        bottom: -Math.ceil(height40 / 2), // half of height
        maxHeight: height40,
      },
      boxCopyIconWrapper: {
        width: getDesignRelativeWidth(88, false),
        height: height40,
      },
      copyIconLineSeparator: {
        width: getDesignRelativeWidth(52, false),
        height: height5,
        bottom: -height25, // half of height
        backgroundColor: theme.colors.surface,
        position: 'absolute',
      },
      copyIconContainer: {
        height: height40,
        maxHeight: height40,
        width: height40,
        minWidth: height40,
        borderRadius: Math.ceil(height40 / 2),
        backgroundColor: theme.colors.primary,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: getDesignRelativeHeight(4, false),
        marginRight: 'auto',
        marginLeft: 'auto',
      },
      boxCopyButtonWrapper: {
        width: getDesignRelativeWidth(174, false),
        height: height40,
      },
      copyButtonLineSeparator: {
        width: getDesignRelativeWidth(174, false),
      },
      copyButtonContainer: {
        width: getDesignRelativeWidth(160, false),
        height: height40,
        minHeight: height40,
        marginTop: 0,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 0,
        marginRight: 'auto',
        marginLeft: 'auto',
      },
    }
  }
  
  export default withStyles(styles)(BorderedBox)
  