import { BlurView } from 'expo-blur';
import i18n from 'i18n-js';
import React from 'react';
import {
  Image,
  Keyboard,
  ScrollView,
  StyleSheet,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {
  Button,
  Divider,
  Headline,
  Subheading,
  Text,
  TextInput,
} from 'react-native-paper';

import Close from '../../components/navs/close';
import { useGlobals } from '../../contexts/global';
import { useIsDark } from '../../hooks/use-theme';
import PlatformUtils from '../../utils/platform';

/**
 * @param route
 * @param navigation
 * @returns {*}
 * @constructor
 */
function AstrologerQuestionScreen({ route, navigation }) {
  const dispatch = useGlobals()[1];
  const astrologist = route.params.astrologist;
  const setData = React.useState({
    message: null,
    email: null,
    astrologer: astrologist.name,
  })[1];
  const isDark = useIsDark();
  const isAndroid = PlatformUtils.isAndroid;
  const handleProceed = () => {
    try {
      dispatch({ type: 'toggleLoader' });
    } catch {
    } finally {
      dispatch({ type: 'toggleLoader' });
      navigation.pop();
    }
  };

  return (
    <BlurView
      style={[StyleSheet.absoluteFill, { flex: 1 }]}
      tint={isDark ? 'dark' : 'light'}
      intensity={isAndroid ? 150 : 100}
    >
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
        <ScrollView style={{ paddingBottom: 200 }}>
          <Close position="right" />
          <View style={{ margin: 20, alignItems: 'center' }}>
            <Headline>{astrologist.name}</Headline>
            <Subheading>
              {i18n.t(astrologist.school, { word: i18n.t('Astrology') })}
            </Subheading>
            <Image source={astrologist.photo} style={styles.image} />
          </View>
          <Divider />
          <View style={{ margin: 20 }}>
            <View style={{ height: 5 }} />
            <TextInput
              label={i18n.t('Your question')}
              multiline
              style={{ height: 150 }}
              maxLength={250}
              onChangeText={(text) =>
                setData((data) => ({ ...data, message: text }))
              }
            />
            <View style={{ height: 5 }} />
            <TextInput
              label={i18n.t('Your email')}
              keyboardType="email-address"
              onChangeText={(text) =>
                setData((data) => ({ ...data, email: text }))
              }
            />
          </View>
          <View style={{ marginHorizontal: 20, marginBottom: 20 }}>
            <Button
              onPress={handleProceed}
              mode="contained"
              style={{ borderRadius: 20 }}
              icon="send"
            >
              {i18n.t('Proceed')}
            </Button>
            <Text style={styles.advice}>
              *
              {i18n.t(
                "You'll need to see an ad before you can send the question"
              )}
            </Text>
          </View>
          <Divider />
        </ScrollView>
      </TouchableWithoutFeedback>
    </BlurView>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 80,
    height: 80,
    aspectRatio: 100 / 100,
    borderRadius: 100,
    marginTop: 10,
  },
  advice: {
    marginTop: 7,
    fontSize: 10,
    textAlign: 'center',
    opacity: 0.8,
  },
});

export default AstrologerQuestionScreen;