import React from 'react';
import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import { TAGG_LIGHT_BLUE } from '../../constants';
import {SCREEN_WIDTH} from '../../utils';

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

const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
  modalVisible,
  setModalVisible,
  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}>
              <TextInput
                autoCapitalize={'none'}
                autoCorrect={false}
                textAlign={'center'}
                placeholder={'Your username'}
                style={styles.textInput}
                onChangeText={setUsername}
                value={username}
              />
              {/* link button */}
              <TouchableHighlight
                style={styles.openButton}
                onPress={() => {
                  setModalVisible(!modalVisible);
                  setUsername('');
                  completionCallback(username);
                }}>
                <Text style={styles.textStyle}>Link</Text>
              </TouchableHighlight>
              {/* cancel button */}
              <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',
  },
  cancelStyle: {
    position: 'relative',
    height: 17,
    top: 17,
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 14,
    /* identical to box height */
    textAlign: 'center',
    color: TAGG_LIGHT_BLUE,
  },
  textInput: {
    height: 20,
    width: '75%',
    borderBottomWidth: 0.4,
    borderBottomColor: '#C4C4C4',
    marginBottom: 20,
  },
});

export default SocialLinkModal;