import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {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';

interface MomentProps {
  title: string;
  images: Array<string>;
}

const Moment: React.FC<MomentProps> = ({title, images}) => {
  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(() => {});
  };
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.titleText}>{title}</Text>
        <PlusIcon
          width={21}
          height={21}
          onPress={() => navigateToImagePicker()}
        />
      </View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.scrollContainer}>
        <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;