// @flow
import React from 'react'
import {ScrollView} from 'react-native'
import {Cell, Section, TableView} from 'react-native-tableview-simple'
import openUrl from '../../components/open-url'
import type {FullJobType} from './types'
import getUrls from 'get-urls'
import {SelectableCell} from './selectable'

function Title({job}: {job: FullJobType}) {
  return (
    <Section header="JOB">
      <Cell
        cellStyle="Subtitle"
        title={job.title}
        detail={job.offCampus ? 'Off-Campus' : 'On-Campus'}
      />
    </Section>
  )
}

function Information({job}: {job: FullJobType}) {
  const department = job.department
    ? <Cell
        cellStyle="RightDetail"
        title="Department"
        detail={job.department}
      />
    : null

  const opens = (
    <Cell cellStyle="RightDetail" title="Date Open" detail={job.dateOpen} />
  )

  const term = job.duringTerm
    ? <Cell cellStyle="Basic" title="Position Available During Term" />
    : null

  const brk = job.duringBreak
    ? <Cell cellStyle="Basic" title="Position Available During Break" />
    : null

  return (
    <Section header="INFORMATION">
      {department}
      {opens}
      {term}
      {brk}
    </Section>
  )
}

function Description({job}: {job: FullJobType}) {
  return (
    <Section header="DESCRIPTION">
      <SelectableCell text={job.description} />
    </Section>
  )
}

function Links({job}: {job: FullJobType}) {
  const links = [...getUrls(job.description)]
  return links.length
    ? <Section header="LINKS">
        {links.map(url =>
          <Cell
            key={url}
            title={url}
            accessory="DisclosureIndicator"
            onPress={() => openUrl(url)}
          />,
        )}
      </Section>
    : null
}

export class JobDetailView extends React.PureComponent {
  props: {
    job: FullJobType,
  }

  render() {
    const {job} = this.props

    return (
      <ScrollView>
        <TableView>
          <Title job={job} />
          <Information job={job} />
          <Description job={job} />
          <Links job={job} />
        </TableView>
      </ScrollView>
    )
  }
}

@@ -1231,39 +1231,36 @@
 iption(%7B
-job%7D: %7Bjob: FullJobType
+text%7D: %7Btext: string
 %7D) %7B%0A  r
@@ -1330,31 +1330,20 @@
 l text=%7B
-job.description
+text
 %7D /%3E%0A   
@@ -1377,39 +1377,36 @@
  Links(%7B
-job%7D: %7Bjob: FullJobType
+text%7D: %7Btext: string
 %7D) %7B%0A  c
@@ -1422,20 +1422,16 @@
 s = 
-%5B...
 getUrls(
 job.
@@ -1430,25 +1430,13 @@
 rls(
-job.description)%5D
+text)
 %0A  r
@@ -1451,14 +1451,14 @@
 nks.
-length
+size()
 %0A   
@@ -1494,21 +1494,33 @@
        %7B
+Array.from(
 links
+)
 .map(url
@@ -2001,32 +2001,45 @@
 Description 
-job
+text
 =%7Bjob
+.description
 %7D /%3E%0A       
@@ -2048,24 +2048,37 @@
  %3CLinks 
-job
+text
 =%7Bjob
+.description
 %7D /%3E%0A   

clean up the signatures of Links and Description a bit