import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
import R from '../../../assets/R';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';

const ContainerTop = (props) => {
  const [isSelected, setSelection] = useState(false);
  const {title, data} = props.data;

  const [listItem, setListItem] = useState([]);

  useEffect(() => {
    const newList = data.map((e) => {
      return {...e, selected: false};
    });

    setListItem(newList);
  }, [props.data]);

  useEffect(() => {
    const newList = data.map((e) => {
      if (props.listRegister.includes(e.id)) {
        return {...e, selected: true};
      } else {
        return {...e, selected: false};
      }
    });

    setListItem(newList);
  }, [props.listRegister]);

  const onSelected = (selected) => {
    const newList = listItem.map((e) => {
      if (e.id != selected.id) return e;

      if (e.selected == false) props.onChoosePacket(e);
      else props.onRemovePacket(e);
      return {...e, selected: !e.selected};
    });
    setListItem(newList);
  };

  return (
    <View>
      {title ? <Text style={styles.txtTitle}> {title}</Text> : null}

      <View style={styles.wrap}>
        {listItem.map((e) => (
          <View key={e.id + 'a'} style={styles.item}>
            <View style={{flex: 1}}>
              <Text>{e.name}</Text>
            </View>
            <View
              style={{
                width: 120,
                marginRight: 30,
                alignItems: 'flex-end',
              }}>
              <Text style={styles.txtMoney}>
                {toPriceVnd(e.price_package.price)}
              </Text>
            </View>
            <CheckBox
              value={e.selected}
              onValueChange={() => onSelected(e)}
              boxType={'square'}
            />
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    paddingTop: 10,
  },
  checkboxContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },

  checkbox: {
    alignSelf: 'flex-end',
  },
  txtNote: {
    fontStyle: 'italic',
  },
  wrap: {
    marginVertical: 10,
    backgroundColor: R.colors.white,
    paddingVertical: 10,
    borderRadius: 10,
    shadowColor: '#AFA9A9',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 1,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    marginVertical: 10,
  },
  txtMoney: {
    fontSize: getFontXD(42),
    color: '#FFB721',
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.main,
    marginTop: 10,
  },
  txtGroup: {
    fontSize: getFontXD(42),
    color: R.colors.main,

    fontStyle: 'italic',
  },
});

export default ContainerTop;
