// @flow
import React from 'react'
import withProps from 'recompose/withProps'
import { map, reverse } from 'ramda'
import Box from '../../elements/Box'
import Text from '../../elements/Text'
import Grid from '../../elements/Grid'
import RemoveButton from '../../elements/RemoveButton'

type Props = {
  list: Array<{
    term: string,
    desc: string | Array<{}>,
    descKeys?: Array<string>,
  }>,
  handleDelete?: ?() => void,
}

const SimpleListItem = ({ list, handleDelete }: Props) => (
  <Grid gridTemplateColumns={handleDelete != null ? '1fr 1fr 32px' : 'repeat(3, 1fr)'} gridGap={2}>
    { map(item => (
      <Box key={`${item.term}-${item.desc}`}>
        <Heading>
          {item.term}
        </Heading>
        { typeof item.desc === 'object'
          ? (
            <Grid cols="2" gridGap={3} justifyItems="start">
              { map(descItem => (
                map(val => (
                  <Description key={`${val}-${descItem[val]}`}>
                    {descItem[val]}
                  </Description>
                ), item.descKeys)
              ), reverse(item.desc))
            }
            </Grid>
          )
          : (
            <Description>
              {item.desc}
            </Description>
          )
        }
      </Box>
    ), list) }
    { handleDelete != null && <RemoveButton px="0" name="Remove" handleOnClick={handleDelete} /> }
  </Grid>
)

SimpleListItem.defaultProps = {
  handleDelete: null,
}

// -------------------------------------

const Heading = withProps({
  fontSize: 4,
  color: 'darkerBlue',
  pb: 2,
})(Text)

const Description = withProps({
  color: 'darkGray',
})(Text)

export default SimpleListItem