import React from "react";
import { StyleSheet } from "react-native";
import { Card, Text, Layout, Avatar, Icon } from "@ui-kitten/components";
import { useModel } from "flooks";

const styles = StyleSheet.create({
  main: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "transparent",
  },
  avatar: {
    width: 33,
    height: 33,
    backgroundColor: "#eee",
  },
  center: {
    flex: 1,
    marginLeft: 14,
    backgroundColor: "transparent",
  },
  text2: {
    paddingTop: 5,
    paddingBottom: 3,
  },
  code: {
    alignSelf: "flex-start",
  },
  icon: {
    width: 20,
    position: "absolute",
    right: 0,
    top: "50%",
    marginTop: -10,
  },
});

export default function MoneyRecord(props) {
  const { getWordsStr } = useModel("wordsModel");
  const { info } = props;
  const { avatar, name, time, type, amount } = info || {};
  const code = React.useMemo(() => {
    if (amount) {
      return (type === "WITHDRAW" ? "-" : "+") + amount.toFixed(2);
    }
    return `${type === "WITHDRAW" ? "-" : "+"  } 0.00`;
  }, [amount, type]);
  return (
    <Card appearance="walletCard">
      <Layout style={styles.main}>
        <Avatar
          style={styles.avatar}
          source={{
            uri: avatar,
          }}
        />
        <Layout style={styles.center}>
          <Text category="s1">{name}</Text>
          <Text category="h1" status="info" style={styles.text2}>
            {time}
          </Text>
          <Text category="h1" status="info">
            {getWordsStr(type)}
          </Text>
        </Layout>
        <Text category="s1" style={styles.code}>
          {code}
        </Text>
        <Icon name="arrow-ios-forward" fill="#C9C9C9" style={styles.icon} />
      </Layout>
    </Card>
  );
}