import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  responsiveFontSize,
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler';

type TermsProps = {
  onTermsPress: () => void;
  accepted: boolean;
  onCheck: () => void;
  showError: boolean;
};

const TermsAndConditions = (props: TermsProps) => {
  const { onTermsPress, accepted, onCheck, showError } = props;

  const icon = accepted
    ? { name: 'checkbox', color: colors.pinkMain }
    : {
        name: 'square-outline',
        color: showError ? colors.error : colors.black,
      };

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <TouchableWithoutFeedback onPress={onCheck} touchSoundDisabled={false}>
          <View style={styles.icon}>
            <Icon {...icon} size={responsiveFontSize(3)} />
          </View>
        </TouchableWithoutFeedback>
        <Text style={styles.text}>{'I accept '}</Text>
        <TouchableOpacity onPress={onTermsPress}>
          <Text style={styles.terms}>{'Terms and conditions'}</Text>
        </TouchableOpacity>
      </View>
      {showError && <Text style={styles.error}>{'Terms and conditions consent is required'}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: responsiveHeight(7),
  },

  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: responsiveWidth(90),
    height: responsiveHeight(4),
  },

  icon: {
    //touchable padding space
    padding: responsiveFontSize(1),
  },

  text: {
    fontSize: responsiveFontSize(1.9),
    fontFamily: 'Lato-Regular',
  },

  error: {
    color: colors.error,
    fontSize: responsiveFontSize(1.8),
    textAlign: 'center',
    fontFamily: 'Lato-Regular',
  },

  terms: {
    color: colors.green,
    fontSize: responsiveFontSize(1.9),
    fontFamily: 'Lato-Regular',
  },
});
export default TermsAndConditions;