import React from 'react';
import {TouchableOpacity} from 'react-native';
import {Modal, StyleSheet, Text, TouchableHighlight, View, ViewProps} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import { TAGG_LIGHT_BLUE } from '../../constants';
import {SCREEN_WIDTH} from '../../utils';
import CloseIcon from '../../assets/ionicons/close-outline.svg';

interface SocialLinkModalProps {
  modalVisible: boolean;
  setModalVisible: (_: boolean) => void;
  completionCallback: (username: string) => void;
  close: () => void;
}

const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
  modalVisible,
  setModalVisible,
  close,
  completionCallback,
}) => {
  const [username, setUsername] = React.useState('');
  return (
    <>
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {}}>
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text>
                Insert your snapchat username to link your snapchat account to your profile!
              </Text>
              <TextInput
                autoCapitalize={'none'}
                autoCorrect={false}
                textAlign={'center'}
                placeholder={'Username'}
                style={styles.textInput}
                onChangeText={setUsername}
                value={username}
              />
              {/* link button */}
              <TouchableHighlight
                style={styles.openButton}
                onPress={() => {
                  setModalVisible(!modalVisible);
                  setUsername('');
                  completionCallback(username);
                }}>
                <Text style={styles.textStyle}>Submit</Text>
              </TouchableHighlight>
              {/* cancel button */}
              <TouchableOpacity style={styles.closeButton} onPress={close}>
                <CloseIcon height={'100%'} width={'100%'} color={'white'} />
              </TouchableOpacity>
              {/* <Text
                onPress={() => {
                  setUsername('');
                  setModalVisible(!modalVisible);
                }}
                style={styles.cancelStyle}>
                Cancel
              </Text> */}
            </View>
          </View>
        </Modal>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    width: (SCREEN_WIDTH * 2) / 3,
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
    backgroundColor: '#2196F3',
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  closeButton: {
    position: 'absolute',
    height: '50%',
    aspectRatio: 1,
    left: '3%',
  },
  // cancelStyle: {
  //   position: 'absolute',
  //   height: 17,
  //   // fontStyle: 'normal',
  //   // fontWeight: '500',
  //   // fontSize: 14,
  //   /* identical to box height */
  //   left: '3%',
  //   // textAlign: 'center',
  //   // color: TAGG_LIGHT_BLUE,
  // },
  textInput: {
    height: 20,
    width: '75%',
    borderBottomWidth: 0.4,
    borderBottomColor: '#C4C4C4',
    marginBottom: 20,
  },
});

export default SocialLinkModal;