import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import themeColors from '../assets/colors';
import { MaterialIcons } from '@expo/vector-icons';
import AppCountDownTimer from './countdown_component';
import moment from 'moment';

export const AppAuctionItem = props => {
  const end = moment(props.expire)
  const start = moment();

  const duration = moment.duration(end.diff(start));
  let secs = duration.asSeconds();
  secs = Math.round(secs);

  return(
    <View>
    {props.delete ? (
      <View style={styles.container}>
        <TouchableOpacity onPress={props.onPress} style={styles.button}>
          <Text style={styles.label}>{props.label}</Text>
          <AppCountDownTimer secs={secs}/>
        </TouchableOpacity>
        <TouchableOpacity onPress={props.onDelete} style={styles.delBtn}>
          <MaterialIcons name="delete" size={24} color={themeColors.WHITE} />
        </TouchableOpacity>
      </View>
    ) : (
      <View style={styles.container}>
        <TouchableOpacity onPress={props.onPress} style={styles.button}>
          <Text style={styles.label}>{props.label}</Text>
          <AppCountDownTimer secs={secs}/>
        </TouchableOpacity>
      </View>
    )}
    </View>

  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection : 'row',
    justifyContent: 'space-between'
  },
  button:{
    padding: 20,
    fontSize: 16,
    flexGrow: 1,
    marginRight: 10,
    flexDirection:'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: themeColors.PRIMARY_COLOR,
    borderRadius: 20,
    shadowColor: 'rgba(0,0,0, .4)',
    shadowOffset: { height: 2, width: 1 },
    shadowOpacity: 1,
    shadowRadius: 1,
    elevation: 2,
    marginVertical: 10
  },
  delBtn:{
    padding: 20,
    fontSize: 16,
    backgroundColor: themeColors.BLACK,
    borderRadius: 20,
    justifyContent: 'center',
    shadowColor: 'rgba(0,0,0, .4)',
    shadowOffset: { height: 2, width: 1 },
    shadowOpacity: 1,
    shadowRadius: 1,
    elevation: 2,
    marginVertical: 10
  },
  label: {
    fontSize: 20,
    color: themeColors.WHITE
  }
});

