import i18n from 'i18n-js';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Button, Headline, Text } from 'react-native-paper';
import TouchableRipple from 'react-native-paper/src/components/TouchableRipple/index';

import { DefaultView } from '../../components/containers';
import SpaceSky from '../../components/decorations/space-sky';
import { useGlobals } from '../../contexts/global';
import Cool from '../../svgs/Cool';
import InLove from '../../svgs/InLove';
import ItsDifficult from '../../svgs/ItsDifficult';
import Married from '../../svgs/Married';
import Taurus from '../../svgs/Taurus';

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function RelationshipScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const [relationshipStatus, setRelationshipStatus] = React.useState('');
  const buttonDisabled = !relationshipStatus;
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { relationship: relationshipStatus },
    });
    navigation.push('Number');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Taurus width={60} height={60} style={styles.taurus} />
      <View style={{ flex: 0.4 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t('What is your relationship status')}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            '{name}, to give you accurate and personal information we need to know some info',
            { name: session.name }
          )}
        </Text>
      </View>
      <View style={styles.sexContainer}>
        <TouchableRipple
          onPress={() => setRelationshipStatus('Married')}
          rippleColor="rgba(0,0,0,0)"
        >
          <View>
            <Married
              width={100}
              style={{ opacity: relationshipStatus === 'Married' ? 1 : 0.5 }}
            />
            <Text style={styles.sexText}>{i18n.t('Married')}</Text>
          </View>
        </TouchableRipple>
        <TouchableRipple
          onPress={() => setRelationshipStatus('Single')}
          rippleColor="rgba(0,0,0,0)"
        >
          <View>
            <Cool
              width={100}
              style={{ opacity: relationshipStatus === 'Single' ? 1 : 0.5 }}
            />
            <Text style={styles.sexText}>{i18n.t('Single')}</Text>
          </View>
        </TouchableRipple>
      </View>
      <View style={{ flex: 0.1 }} />
      <View style={styles.sexContainer}>
        <TouchableRipple
          onPress={() => setRelationshipStatus('In love')}
          rippleColor="rgba(0,0,0,0)"
        >
          <View>
            <InLove
              width={100}
              style={{ opacity: relationshipStatus === 'In love' ? 1 : 0.5 }}
            />
            <Text style={styles.sexText}>{i18n.t('In love')}</Text>
          </View>
        </TouchableRipple>
        <TouchableRipple
          onPress={() => setRelationshipStatus("It's difficult")}
          rippleColor="rgba(0,0,0,0)"
        >
          <View>
            <ItsDifficult
              width={100}
              style={{
                opacity: relationshipStatus === "It's difficult" ? 1 : 0.5,
              }}
            />
            <Text style={styles.sexText}>{i18n.t("It's difficult")}</Text>
          </View>
        </TouchableRipple>
      </View>
      <View style={styles.buttonContainer}>
        <Button
          mode="contained"
          disabled={buttonDisabled}
          onPress={_handleContinue}
        >
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

const styles = StyleSheet.create({
  constellation: {
    zIndex: 0,
    position: 'absolute',
    bottom: 20,
    left: 20,
    opacity: 0.1,
  },
  taurus: {
    zIndex: 0,
    position: 'absolute',
    top: 20,
    right: 20,
    opacity: 0.2,
  },
  textContainer: {
    flex: 1,
    alignSelf: 'center',
    paddingHorizontal: 20,
  },
  textHeadline: {
    textAlign: 'center',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  },
  textText: {
    textAlign: 'center',
    paddingVertical: 5,
  },
  logoContainer: {
    flex: 1,
    alignSelf: 'center',
    paddingVertical: 25,
    zIndex: 1,
  },
  sexContainer: {
    flex: 1,
    paddingHorizontal: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  sexText: {
    textAlign: 'center',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  },
  buttonContainer: {
    flex: 0.5,
    paddingHorizontal: 20,
    paddingTop: 35,
    justifyContent: 'flex-end',
    marginBottom: 20,
  },
});

export default RelationshipScreen;