/* @flow */

/* Presentational component to render a simple address-list sorted by most-recently changed */
import type { KnxAddress } from '../../common/types';
import React from 'react';
import visualizeAddrValue from './visualizeAddresses';
import { comparator, complement, isNil, map, pipe, sort, values } from 'ramda';

import { Flex, Box } from 'reflexbox';
import {
  Badge,
  Block,
  Card,
  Text,
} from '../components';

type Props = {
  addresses: Array<KnxAddress>,
};

const hasStatus = complement(isNil);
const byHasValue = comparator((a, b) => isNil(b.value) ? hasStatus(a.value) : a.updatedAt > b.updatedAt);

const AddressList = ({ addresses }: Props) => {
  const boxedAddress = address => (
    <Box p={1} col={12} key={address.id} >
      <Block py={1} borderTop >
        <Flex justify="space-between">
          <Box col={2}>
            <Badge rounded theme="info">{address.id}</Badge>
          </Box>
          <Box col={8}>
            <Text>{address.name}</Text>
          </Box>
          <Box col={2} onClick={(e) => { console.log(`Clicked ${e.target} with data ${JSON.stringify(e.target.dataset)}`); }}>
            { visualizeAddrValue(address) }
          </Box>
        </Flex>
      </Block>
    </Box>
  );

  const addrLstByDate = pipe(
    values,
    sort(byHasValue), /* put active / on addresses first, but behind recently updated ones (s. below) */
    map(boxedAddress),
    values, /* NOTE: Make last result an array, otherwise React complains about an Object returned by #mapObjIndexed */
  );

  return (
    <Flex column>
      <Card p={0}>
        <Flex wrap>
          {
            addrLstByDate(addresses)
          }
        </Flex>
      </Card>
    </Flex>
  );
};

export default AddressList;

@@ -369,43 +369,28 @@
 rt %7B
-%0A 
  Badge,
-%0A 
  Block,
-%0A  Card,%0A 
  Text
-,%0A
+ 
 %7D fr
@@ -528,16 +528,19 @@
 parator(
+%0A  
 (a, b) =
@@ -604,16 +604,17 @@
 pdatedAt
+%0A
 );%0A%0Acons
@@ -733,17 +733,16 @@
 ress.id%7D
- 
 %3E%0A      
@@ -764,17 +764,16 @@
 orderTop
- 
 %3E%0A      
@@ -1002,24 +1002,48 @@
     %3CBox
- col=%7B2%7D
+%0A            col=%7B2%7D%0A           
  onClick
@@ -1048,29 +1048,58 @@
 ck=%7B
-(e)
+e
  =%3E %7B
- console.log(
+%0A              console.log(%0A                
 %60Cli
@@ -1165,13 +1165,51 @@
 t)%7D%60
-); %7D%7D
+%0A              );%0A            %7D%7D%0A          
 %3E%0A  
@@ -1219,17 +1219,16 @@
        %7B
- 
 visualiz
@@ -1246,17 +1246,16 @@
 address)
- 
 %7D%0A      
@@ -1364,16 +1364,23 @@
    sort(
+%0A      
 byHasVal
@@ -1381,18 +1381,22 @@
 HasValue
+%0A    
 )
-,
  /* put 
@@ -1470,16 +1470,17 @@
 elow) */
+,
 %0A    map
@@ -1505,17 +1505,16 @@
   values
-,
  /* NOTE
@@ -1653,29 +1653,8 @@
 mn%3E%0A
-      %3CCard p=%7B0%7D%3E%0A  
     
@@ -1679,24 +1679,9 @@
     
-  %7B%0A            
+%7B
 addr
@@ -1704,27 +1704,16 @@
 ses)
-%0A          
 %7D%0A      
   %3C/
@@ -1704,34 +1704,32 @@
 ses)%7D%0A      
- 
- 
 %3C/Flex%3E%0A
       %3C/Card
@@ -1720,22 +1720,8 @@
 ex%3E%0A
-      %3C/Card%3E%0A
     

Remove useless Card-wrapper component from addressList.