import * as React from 'react'
import { View, Text, TextStyle, ViewStyle } from 'react-native'

const ROOT: ViewStyle = { backgroundColor: '#eee' }
const TITLE: TextStyle = { fontWeight: '600', color: '#3d3d3d' }
const TITLE_WRAPPER: ViewStyle = {}
const USE_CASE_WRAPPER: ViewStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  borderTopColor: '#e6e6e6',
  borderTopWidth: 1,
  flexDirection: 'row',
}
const USE_CASE: TextStyle = {
  fontSize: 10,
  color: '#666',
  paddingHorizontal: 4,
  paddingBottom: 2,
}
const USAGE: TextStyle = { color: '#666', fontSize: 10, paddingTop: 0 }
const HEADER: ViewStyle = {
  paddingTop: 20,
  paddingBottom: 10,
  paddingHorizontal: 10,
  borderBottomColor: '#e6e6e6',
  borderBottomWidth: 1,
}
const COMPONENT: ViewStyle = { backgroundColor: '#fff' }

export interface UseCaseProps {
  /** The title. */
  text: string
  /** When should we be using this? */
  usage?: string
  /** The component use case. */
  children: React.ReactNode
  /** A style override. Rarely used. */
  style?: ViewStyle
  /** Don't use any padding because it's important to see the spacing. */
  noPad?: boolean
  /** Don't use background color because it's important to see the color. */
  noBackground?: boolean
}

export function UseCase(props: UseCaseProps) {
  const style: ViewStyle = {
    ...COMPONENT,
    ...{ padding: props.noPad ? 0 : 10 },
    ...{
      backgroundColor: props.noBackground
        ? 'rgba(0,0,0,0)'
        : COMPONENT.backgroundColor,
    },
    ...props.style,
  }

  return (
    <View style={ROOT}>
      <View style={HEADER}>
        <View style={USE_CASE_WRAPPER}>
          <Text style={USE_CASE}>Use Case</Text>
        </View>
        <View style={TITLE_WRAPPER}>
          <Text style={TITLE}>{props.text}</Text>
        </View>
        {props.usage ? <Text style={USAGE}>{props.usage}</Text> : null}
      </View>
      <View style={style}>{props.children}</View>
    </View>
  )
}