// @flow

import React from 'react'
import {Alert, StyleSheet} from 'react-native'
import {Button} from '../components/button'
import {phonecall} from 'react-native-communications'
import {tracker} from '../../analytics'
import type {CardType} from './types'
import {Markdown} from '../components/markdown'
import glamorous from 'glamorous-native'
import * as c from '../components/colors'

const Title = glamorous.text({
  fontSize: 30,
  alignSelf: 'center',
  marginTop: 10,
})

const Container = glamorous.view({
  backgroundColor: c.white,
  paddingHorizontal: 10,
})

const styles = StyleSheet.create({
  heading: {
    color: 'red',
  },
})

function formatNumber(phoneNumber: string) {
  const re = /(\d{3})-?(\d{3})-?(\d{4})/g
  return phoneNumber.replace(re, '($1) $2-$3')
}

function promptCall(buttonText: string, phoneNumber: string) {
  Alert.alert(buttonText, formatNumber(phoneNumber), [
    {text: 'Cancel', onPress: () => console.log('Call cancel pressed')},
    {text: 'Call', onPress: () => phonecall(phoneNumber, false)},
  ])
}

export class ContactCard extends React.PureComponent {
  props: CardType

  onPress = () => {
    const {title, phoneNumber, buttonText} = this.props
    tracker.trackScreenView(`ImportantContacts_${title.replace(' ', '')}View`)
    promptCall(buttonText, phoneNumber)
  }

  render() {
    const {title, text, buttonText} = this.props

    return (
      <Container>
        <Title selectable={true}>{title}</Title>
        <Markdown
          styles={{
            Strong: styles.heading,
          }}
          source={text}
        />
        <Button onPress={this.onPress} title={buttonText} />
      </Container>
    )
  }
}

@@ -571,83 +571,8 @@
 %7D)%0A%0A
-const styles = StyleSheet.create(%7B%0A  heading: %7B%0A    color: 'red',%0A  %7D,%0A%7D)%0A%0A
 func
@@ -1407,87 +1407,8 @@
 down
-%0A          styles=%7B%7B%0A            Strong: styles.heading,%0A          %7D%7D%0A         
  sou
@@ -1417,24 +1417,16 @@
 e=%7Btext%7D
-%0A       
  /%3E%0A    

Remove red-ness from bold text