import React, {useState, useEffect} from 'react';
import {
    View,
    TouchableOpacity,
    Text,
    LayoutAnimation,
    StyleSheet
} from 'react-native';
import R from '../../../assets/R';

import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import TextField from '../../../components/TextField';
import {RadioBuySale} from '../../../Config/constants';

const ItemCalculator = (props) => {
    const [expanded, setExpanded] = useState(true);
    const changeLayout = () => {
        LayoutAnimation.configureNext({
            duration: 500,
            create: {
                type: LayoutAnimation.Types.spring,
                property: LayoutAnimation.Properties.scaleY,
                springDamping: 1.7,
            },
            update: {
                type: LayoutAnimation.Types.spring,
                springDamping: 1.7,
            },
        });
        setExpanded(!expanded)
    };

    return (
        <View style={[styles.container, {marginBottom: props.isLastItem? HEIGHTXD(100) : HEIGHTXD(30)}]}>
            <TouchableOpacity
                onPress={() => changeLayout()}
                style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
            >
                <Text style={styles.title}>{props.item.name}</Text>
                {expanded === true ? (
                    <Ionicons
                        name='chevron-up'
                        size={WIDTHXD(50)}
                        style={{ marginRight: WIDTHXD(25) }}
                        color={R.colors.iconGray}
                    />
                ) : (
                    <Ionicons
                        name='chevron-down'
                        size={WIDTHXD(50)}
                        style={{ marginRight: WIDTHXD(25) }}
                        color={R.colors.iconGray}
                    />
                )}
            </TouchableOpacity>
            {expanded ?
                <View style={{paddingVertical: HEIGHTXD(20)}}>
                    <TextField
                        title={I18n.t('Status')}
                        content={props.item.status}
                        color={props.item.status == RadioBuySale[0].label ? R.colors.green : R.colors.red2}
                    />
                    <TextField
                        title={I18n.t('SlotNumber')}
                        content={props.item.slot_number}
                    />
                    <TextField
                        title={`${I18n.t('ProfitLoss')} (USD)`}
                        content={toPriceVnd(props.item.profit_loss_usd)}
                    />
                    <TextField
                        title={`${I18n.t('ProfitLoss')} (VNĐ)`}
                        content={toPriceVnd(props.item.profit_loss_vnd)}
                    />
                </View>
                : null
            }
        </View>
    )

}
export default ItemCalculator
const styles = StyleSheet.create({
    container: {
        backgroundColor: R.colors.white,
        borderColor: R.colors.borderGray,
        borderWidth: 0.3,
        marginHorizontal: WIDTHXD(40),
        marginBottom: HEIGHTXD(30)
    },
    flexTitle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: HEIGHTXD(20),
        borderBottomColor: R.colors.borderGray,
    },
    title: {
        fontSize: getFontXD(36),
        lineHeight: getLineHeightXD(56),
        color: R.colors.black,
    },
})
