import AsyncStorage from '@react-native-community/async-storage';
import React, {useState} from 'react';
import {
  Image,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
import {normalize} from '../../utils';
import {UniversityIcon} from './';
import {UniversityIconProps} from './UniversityIcon';

interface BadgeTutorialProps {
  uniIconProps: UniversityIconProps;
  setShowBadgeTutorial: Function;
}

const BadgeTutorial: React.FC<BadgeTutorialProps> = ({
  uniIconProps,
  setShowBadgeTutorial,
}) => {
  const [showModal, setShowModal] = useState(true);
  const {layout, university, university_class} = uniIconProps;

  const onTap = async () => {
    await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true');
    setShowBadgeTutorial(false);
    setShowModal(false);
  };
  return (
    <Modal
      animationType="fade"
      transparent
      visible={showModal}
      presentationStyle="overFullScreen">
      <TouchableOpacity onPress={onTap} style={styles.viewWrapper}>
        <View style={styles.textContainerStyles}>
          <Text style={styles.textStyles}>
            Tap on the univeristy icon to edit your badges!
          </Text>
        </View>
        <View
          style={{
            left: layout.left,
            top: PROFILE_CUTOUT_TOP_Y * 1.02 - layout.top,
            width: layout.width,
            height: layout.height,
          }}>
          <UniversityIcon
            {...{
              university,
              university_class,
              needsShadow: true,
            }}
          />
          <Image source={require('../../assets/images/badgeTutorial.png')} />
        </View>
      </TouchableOpacity>
    </Modal>
  );
};
const styles = StyleSheet.create({
  viewWrapper: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalView: {
    backgroundColor: '#fff',
  },
  textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'},
  textStyles: {
    color: 'white',
    fontWeight: '700',
    fontSize: normalize(20),
    lineHeight: normalize(25),
    textAlign: 'center',
  },
});

export default BadgeTutorial;