Untitled

import { View, Text, StyleSheet, FlatList, ScrollView } from 'react-native'
import { useGetReports } from '~/hooks/query/report'
import { CustomLoader } from '~/components'
import BarChart from '~/components/BarChart'

import EntypoIcon from 'react-native-vector-icons/Entypo'
import { Dimensions } from 'react-native'
const { width, height } = Dimensions.get('window')
import Swiper from 'react-native-swiper'
const newHeight = height - 70 * 2

export default function ReportsScreen() {
  const { data: reports, isLoading, isFetching, refetch } = useGetReports()

  return (
    <CustomLoader isLoading={isLoading}>
      <View style={style.container}>
        <ScrollView pagingEnabled={true}>
          <View style={{ width, height: newHeight }}>
            <View style={style.containerInside}>
              <View style={style.banner}>
                <Text style={{ ...style.bannerText, ...style.bannerIcon }}>
                  <EntypoIcon name="bar-graph" size={30} />
                </Text>
                <Text style={style.bannerText}>YOUR ACTIVE VISITORS</Text>
              </View>

              <View style={style.chart}>
                <BarChart
                  title="Visitor Demographics"
                  data={[
                    {
                      label: '18-24',
                      value: 11,
                    },
                    {
                      label: '25-34',
                      value: 50,
                    },
                    {
                      label: '35-44',
                      value: 29,
                    },
                    {
                      label: '45-54',
                      value: 6,
                    },
                    {
                      label: '55-64',
                      value: 4,
                    },
                    {
                      label: '65+',
                      value: 1,
                    },
                  ]}
                />
              </View>

              <View style={style.bottom}>
                <View style={{ ...style.bottomText, ...style.bottomTextLeft }}>
                  <Text style={style.bottomTextLeft}>01/03/2022</Text>
                </View>
                <View style={{ ...style.bottomText, ...style.bottomTextRight }}>
                  <Text style={style.bottomTextRight}>
                    <EntypoIcon
                      name="heart-outlined"
                      color={'black'}
                      size={50}
                    />
                  </Text>
                </View>
              </View>
            </View>
          </View>

          <View style={{ width, height: newHeight }}>
            <View style={style.containerInside}>
              <View style={style.banner}>
                <Text style={{ ...style.bannerText, ...style.bannerIcon }}>
                  <EntypoIcon name="bar-graph" size={30} />
                </Text>
                <Text style={style.bannerText}>YOUR ACTIVE VISITORS</Text>
              </View>

              <View style={style.chart}>
                <BarChart
                  title="Visitor Demographics"
                  data={[
                    {
                      label: '18-24',
                      value: 11,
                    },
                    {
                      label: '25-34',
                      value: 50,
                    },
                    {
                      label: '35-44',
                      value: 29,
                    },
                    {
                      label: '45-54',
                      value: 6,
                    },
                    {
                      label: '55-64',
                      value: 4,
                    },
                    {
                      label: '65+',
                      value: 1,
                    },
                  ]}
                />
              </View>

              <View style={style.bottom}>
                <View style={{ ...style.bottomText, ...style.bottomTextLeft }}>
                  <Text style={style.bottomTextLeft}>01/03/2022</Text>
                </View>
                <View style={{ ...style.bottomText, ...style.bottomTextRight }}>
                  <Text style={style.bottomTextRight}>
                    <EntypoIcon
                      name="heart-outlined"
                      color={'black'}
                      size={50}
                    />
                  </Text>
                </View>
              </View>
            </View>
          </View>

          <View style={{ width, height: newHeight }}>
            <Swiper showsPagination={true}>
              <View style={style.slide}>
                <Text style={style.text}>Sayfa 1</Text>
              </View>
              <View style={style.slide}>
                <Text style={style.text}>Sayfa 2</Text>
              </View>
              <View style={style.slide}>
                <Text style={style.text}>Sayfa 3</Text>
              </View>
            </Swiper>
          </View>
        </ScrollView>
      </View>
    </CustomLoader>
  )
}

const style = StyleSheet.create({
  container: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    height: newHeight,
  },
  containerInside: {
    display: 'flex',
    flexDirection: 'column',
    height: newHeight - 20,
  },
  banner: {
    backgroundColor: '#f4e4a3',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  bannerText: {
    fontSize: 25,
    margin: 10,
    color: '#d6a85d',
    fontWeight: 'bold',
  },
  bannerIcon: {
    backgroundColor: 'white',
    padding: 8,
    borderRadius: 9999,
  },

  chart: {
    display: 'flex',
    justifyContent: 'center',
    flexShrink: 0,
  },

  bottom: {
    position: 'absolute',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-end',
    bottom: 0,
    zIndex: 999,
  },
  bottomText: {
    fontSize: 16,
    position: 'relative',
    width: '50%',
    display: 'flex',
    alignItems: 'flex-end',
    padding: 5,
  },
  bottomTextLeft: {
    alignItems: 'flex-start',
    fontWeight: 'bold',
    fontSize: 15,
    color: 'black',
  },
  bottomTextRight: {
    alignItems: 'flex-end',
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
})

/**

            <View style={style.containerInside}>
              <View style={style.banner}>
                <Text style={{ ...style.bannerText, ...style.bannerIcon }}>
                  <EntypoIcon name="bar-graph" size={30} />
                </Text>
                <Text style={style.bannerText}>YOUR ACTIVE VISITORS</Text>
              </View>

              <View style={style.chart}>
                <BarChart
                  title="Visitor Demographics"
                  data={[
                    {
                      label: '18-24',
                      value: 11,
                    },
                    {
                      label: '25-34',
                      value: 50,
                    },
                    {
                      label: '35-44',
                      value: 29,
                    },
                    {
                      label: '45-54',
                      value: 6,
                    },
                    {
                      label: '55-64',
                      value: 4,
                    },
                    {
                      label: '65+',
                      value: 1,
                    },
                  ]}
                />
              </View>

              <View style={style.bottom}>
                <View style={{ ...style.bottomText, ...style.bottomTextLeft }}>
                  <Text style={style.bottomTextLeft}>01/03/2022</Text>
                </View>
                <View style={{ ...style.bottomText, ...style.bottomTextRight }}>
                  <Text style={style.bottomTextRight}>
                    <EntypoIcon
                      name="heart-outlined"
                      color={'black'}
                      size={50}
                    />
                  </Text>
                </View>
              </View>
            </View>


 */