import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Alert, StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import PlusIcon from '../../assets/icons/plus_icon-01.svg';
import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
import {MOMENTS_TITLE_COLOR} from '../../constants';
import {SCREEN_WIDTH} from '../../utils';
import ImagePicker from 'react-native-image-crop-picker';
import MomentTile from './MomentTile';
import {MomentType} from 'src/types';

interface MomentProps {
  title: string;
  images: MomentType[] | undefined;
  isProfileView: boolean;
}

const Moment: React.FC<MomentProps> = ({title, images, isProfileView}) => {
  const navigation = useNavigation();

  const navigateToImagePicker = () => {
    ImagePicker.openPicker({
      width: 580,
      height: 580,
      cropping: true,
      cropperToolbarTitle: 'Upload a moment',
      mediaType: 'photo',
    })
      .then((picture) => {
        if ('path' in picture) {
          navigation.navigate('CaptionScreen', {
            title: title,
            image: picture,
          });
        }
      })
      .catch((err) => {
        Alert.alert('Unable to upload moment!');
      });
  };
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.titleText}>{title}</Text>
        {!isProfileView ? (
          <PlusIcon
            width={21}
            height={21}
            onPress={() => navigateToImagePicker()}
          />
        ) : (
          <React.Fragment />
        )}
      </View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.scrollContainer}>
        {images &&
          images.map((imageObj: MomentType) => (
            <MomentTile key={imageObj.moment_id} moment={imageObj} />
          ))}
        {(images === undefined || images.length === 0) && !isProfileView && (
          <TouchableOpacity onPress={() => navigateToImagePicker()}>
            <LinearGradient
              colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
              <View style={styles.defaultImage}>
                <BigPlusIcon width={50} height={50} />
                <Text style={styles.defaultImageText}>
                  Add a moment of your {title.toLowerCase()}!
                </Text>
              </View>
            </LinearGradient>
          </TouchableOpacity>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#eee',
  },
  header: {
    flex: 1,
    paddingHorizontal: 10,
    padding: 5,
    paddingTop: 20,
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  titleText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: MOMENTS_TITLE_COLOR,
  },
  scrollContainer: {
    height: SCREEN_WIDTH / 2,
    backgroundColor: '#eee',
  },
  defaultImage: {
    aspectRatio: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
  },
  defaultImageText: {
    fontSize: 20,
    paddingTop: 20,
    color: 'white',
    fontWeight: 'bold',
    width: '75%',
    textAlign: 'center',
  },
});

export default Moment;