import React from 'react';
import {
  View,
  ImageBackground,
  StyleSheet,
  ScrollView,
} from 'react-native';
import HeaderHome from '../../components/Header/HeaderHome';
import {getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
import SwiperComponent from './SwiperComponent';
import PriceListView from './PriceListView';

const HomeView = (props) => {
  return (
    <ImageBackground
      source={R.images.bgHome}
      resizeMode={'stretch'}
      style={{width: '100%', height: '100%'}}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <HeaderHome />
        {props.listImage.length > 0 ? (
          <SwiperComponent listImage={props.listImage} />
        ) : (
          <View style={{height: 10}} />
        )}
        <PriceListView
          setFilterId={props.setFilterId}
          filterId={props.filterId}
          filters={props.filters}
          dataPrice={props.dataPrice}
          onSortByName={props.onSortByName}
          onSortByPercent={props.onSortByPercent}
          onSortByPriceOpenClose={props.onSortByPriceOpenClose}
          onSortByPriceHighLow={props.onSortByPriceHighLow}
        />
      </ScrollView>
    </ImageBackground>
  );
};

export default HomeView;
const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#DFE7F5',

    marginTop: 60,
    borderTopLeftRadius: 60,
  },
  containerBody: {
    marginTop: -50,
  },
  containerMenu: {
    height: 160,
    backgroundColor: 'white',
    marginTop: 20,
    marginBottom: 10,
    marginHorizontal: 20,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 2.84,
    elevation: 3,
  },
  row: {
    flexDirection: 'row',
    flex: 1,
  },
  itemMenu: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  txtTitle: {
    fontSize: getFontXD(36),
    color: '#00359C',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  },
  txtMoney: {
    fontSize: getFontXD(42),
    color: R.colors.black,
    marginTop: 5,
  },
  txtMoney1: {
    fontSize: getFontXD(42),
    color: '#2fbd04',
    marginTop: 5,
  },
});
