import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import themeColors from '../assets/colors';

export const AppStakeItem = (props) => {
  const [bid, setBid] = useState({});
  const initialValues = {
    id : "1",
    name : "Saman",
    bidprice : 908
  }
  useEffect(() => {
    if (props.bid === undefined) {
      setBid(initialValues)
    } else {
      setBid(props.bid)
    }
  }, [])
  return(
    <View style={styles.stake}>
      <View style={styles.stakeWrapperEdges}/>
      <View style={styles.stakeSideEdges}>
        <View style={styles.circleTop}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
        <View style={styles.circleEnd}/>
      </View>
      <View style={styles.stakeDetailsContent}>
        <View>
          <View  style={styles.lotTile}>
            <Text style={styles.lotText}>{bid.id}</Text>
          </View>
        </View>
        <View style={styles.lotDetails}>
          <Text style={styles.lotName}>{bid.name}</Text>
          <Text style={styles.label}>Rs. {bid.bidprice}</Text>
        </View>
      </View>
      <View style={styles.stakeSideEdges}>
        <View style={styles.circleTop}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
          <View style={styles.dashedLine}/>
        <View style={styles.circleEnd}/>
      </View>
      <View style={styles.stakeWrapperEdges}/>
    </View>
  )
}

const styles = StyleSheet.create({
  stake:{
    alignItems: "center",
    fontSize: 16,
    flexDirection: 'row',
    borderRadius: 10,
    backgroundColor: themeColors.PRIMARY_COLOR,
    marginHorizontal: 10,
    marginVertical: 10,
    height: 120
  },
  label: {
    fontSize: 22,
    color: themeColors.WHITE
  },
  stakeWrapperEdges: {
    width: 20,
  },
  stakeSideEdges: {
    width: 20,
    height: '100%',
    justifyContent: 'space-between',
  },
  circleTop: {
    height:14,
    borderBottomLeftRadius: 100,
    borderBottomEndRadius: 100,
    backgroundColor: themeColors.WHITE
  },
  circleEnd: {
    height:14,
    borderTopEndRadius: 100,
    borderTopStartRadius: 100,
    backgroundColor: themeColors.WHITE
  },
  dashedLine: {
    height: '10%',
    width: 5,
    alignSelf: 'center',
    backgroundColor: 'white'
  },
  stakeDetailsContent: {
    flex: 1,
    flexDirection: 'row',
    padding: 30
  },
  lotTile: {
    marginRight: 15,
    borderRadius: 10,
    padding: 5,
    backgroundColor: themeColors.WHITE
  },
  lotText: {
    fontSize: 20,
    color: themeColors.BLACK
  },
  lotName: {
    fontSize: 16,
    color: themeColors.WHITE,
    marginBottom: 5
  },
});

