import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
  getFontXD,
  HEIGHTXD,
  WIDTHXD,
  toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
import I18n from '../../../helper/i18/i18n';
import {useNavigation} from '@react-navigation/native';
import {DETAIL_REQUIRE_MONEY} from '../../../routers/ScreenNames';

const Item = (props) => {
  const {item} = props;
  const navigate = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigate.navigate(DETAIL_REQUIRE_MONEY)}>
      <View style={styles.container}>
        <Block flex={1} row>
          <View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
          <View style={styles.wrapDate}>
            <Text style={styles.txt}>T{item.month}</Text>
            <Text style={styles.txtTitle}>{item.day}</Text>
          </View>
          <Block style={styles.wrapRight} padding={[10, 10]} flex={1}>
            <View style={styles.rowBet}>
              <View
                style={{
                  flex: 1,
                  height: HEIGHTXD(200),
                  paddingRight: 10,
                }}>
                <View style={{flex: 1}}>
                  <Text numberOfLines={2} style={styles.txtTitle}>
                    {item.note}
                  </Text>
                </View>
                <Text style={styles.txtDate}>
                  `${I18n.t('Date')} ${item.date}`
                </Text>
              </View>
              <View>
                <Text
                  style={{
                    fontSize: getFontXD(42),
                    fontWeight: 'bold',
                    color: '#FFB721',
                  }}>
                  +{toPriceVnd(item.money)}
                </Text>
              </View>
            </View>
          </Block>
        </Block>
      </View>
    </TouchableOpacity>
  );
};

export default Item;

const styles = StyleSheet.create({
  container: {
    height: HEIGHTXD(250),
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    marginHorizontal: 10,
    backgroundColor: R.colors.white,
    marginTop: 10,
    borderRadius: HEIGHTXD(30),
  },
  wrapRight: {
    borderLeftColor: R.colors.borderGray,
    borderLeftWidth: 0.7,
  },
  wrapLeft: {
    width: WIDTHXD(16),
    borderTopLeftRadius: HEIGHTXD(30),
    borderBottomStartRadius: HEIGHTXD(30),
  },
  wrapDate: {
    justifyContent: 'center',
    paddingLeft: 10,
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.black,
    fontWeight: '700',
  },
  txt: {
    fontSize: getFontXD(36),
    color: '#363636',
  },
  txtDate: {
    fontSize: getFontXD(39),
    color: '#363636',
    fontStyle: 'italic',
  },
  rowBet: {
    flexDirection: 'row',
  },
});
