import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Button } from 'react-native-paper';
import { responsiveFontSize, responsiveWidth } from 'react-native-responsive-dimensions';

import { WelcomeCheck, WelcomeChecks } from './WelcomeChecks';
import WelcomeTitle from './WelcomeTitle';
import { colors } from '../../theme/colors';
import TermsAndConditions from './TermsAndConditions';

const Welcome = () => {
  const navigation = useNavigation();
  const [accepted, setAccepted] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleCheck = () => {
    if (!accepted) {
      setSubmitted(false);
    }
    setAccepted(x => !x);
  };

  const handleTerms = () => {};

  const handleContinue = () => {
    if (accepted) {
      navigation.navigate('Countries');
    } else {
      setSubmitted(true);
    }
  };

  return (
    <View style={styles.container}>
      <WelcomeTitle />
      <WelcomeChecks>
        <WelcomeCheck text="It´s Secured, our communication is encrypted and private." />
        <WelcomeCheck text="Your crendentials won´t be available for MyCompany, and are stored in our vault." />
        <WelcomeCheck text="You can revoke your consent to MyCompany at any time." />
      </WelcomeChecks>
      <TermsAndConditions
        accepted={accepted}
        showError={!accepted && submitted}
        onCheck={handleCheck}
        onTermsPress={handleTerms}
      />
      <Button
        mode="contained"
        color={colors.pinkMain}
        style={styles.btn}
        labelStyle={styles.btnLabel}
        uppercase={false}
        children={'Continue'}
        onPress={handleContinue}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },

  btn: { width: responsiveWidth(90) },

  btnLabel: {
    fontSize: responsiveFontSize(2.6),
    letterSpacing: 0,
    fontFamily: 'Lato-Regular',
  },
});

export default Welcome;