import { BlurView } from 'expo-blur'; import * as Localization from 'expo-localization'; import i18n from 'i18n-js'; import React from 'react'; import { StyleSheet, View } from 'react-native'; import { useTheme } from 'react-native-paper'; import Close from '../../components/navs/close'; import ShadowHeadline from '../../components/paper/shadow-headline'; import { Sign } from '../../components/zodiac'; import { SESSION_KEY } from '../../constants/session'; import HoroscopeSigns, { HoroscopeDates } from '../../constants/zodiac-signs'; import { useGlobals } from '../../contexts/global'; import { useIsDark } from '../../hooks/use-theme'; import { Backgrounds } from '../../svgs'; import PlatformUtils from '../../utils/platform'; import Sleep from '../../utils/sleep'; import Storer from '../../utils/storer'; /** * @param navigation * @returns {*} * @constructor */ function ZodiacScreen({ navigation }) { const [{ session }, dispatch] = useGlobals(); const { colors } = useTheme(); const isAndroid = PlatformUtils.isAndroid; const isDark = useIsDark(); const locales = ['es', 'en']; const cut_locale = Localization.locale.substring(0, 2); const locale = locales.includes(cut_locale) ? cut_locale : 'en'; const handleSignPress = async (sign) => { dispatch({ type: 'setSession', fields: { sign }, }); await Storer.set(SESSION_KEY, { session, sign }); dispatch({ type: 'toggleLoader' }); await Sleep(300); dispatch({ type: 'toggleLoader' }); navigation.pop(); }; return ( <BlurView style={[StyleSheet.absoluteFill]} tint={isDark ? 'dark' : 'light'} intensity={isAndroid ? 150 : 100} > <Close position="right" /> <View style={styles.headerContainer}> <ShadowHeadline style={styles.headerHeadline}> {i18n.t('Zodiac signs')} </ShadowHeadline> </View> <View style={styles.signsContainer}> {HoroscopeSigns.map((sign) => ( <Sign key={sign} showTitle sign={sign} signHeight={65} signWidth={65} onPress={() => handleSignPress(sign)} style={{ marginBottom: 7, padding: 3 }} styleTitle={{ marginTop: 5 }} subtitle={HoroscopeDates[sign][locale]} /> ))} </View> <Backgrounds.ConstellationSimple height={450} width={450} color={colors.text} dotColor={colors.primary} style={styles.constellation} /> </BlurView> ); } const styles = StyleSheet.create({ headerContainer: { alignItems: 'center', justifyContent: 'center', flex: 0.2, }, headerHeadline: { fontWeight: 'bold', lineHeight: 34, }, signsContainer: { zIndex: 5, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', paddingHorizontal: 20, flex: 1.5, }, constellation: { position: 'absolute', bottom: 10, left: 10, opacity: 0.05, zIndex: 1, }, }); export default ZodiacScreen;