import React from 'react';
import {Animated, TouchableOpacity} from 'react-native';

import colors from '@configs/colors';
import {View, Image, Text, StyleSheet} from 'react-native';
import {PA_Point, PA_Point_Event, PA_Point_EventStore} from './types';
import {store} from '@redux/store';

import {
  Avatar,
  AvatarBadge,
  AvatarFallbackText,
  AvatarGroup,
  AvatarImage,
} from '@gluestack-ui/themed';

import tate from '@assets/tate.jpg';
import {RootScreenNavigationProp} from '@navigation/navigation';
import {useNavigation} from '@react-navigation/native';

type EventType = PA_Point_Event | PA_Point_EventStore;

export function EventMarker(props: {marker: EventType}) {
  const marker = props.marker;
  const colors = store.getState().nonSaveVariables.theme.colors;

  const navigation = useNavigation<RootScreenNavigationProp>();

  const fadeAnim = React.useRef(new Animated.Value(0)).current;
  const fadeAnim2 = React.useRef(new Animated.Value(0.9)).current;

  React.useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  React.useEffect(() => {
    Animated.timing(fadeAnim2, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim2]);

  return (
    <Animated.View
      style={{
        ...(marker.theme === 1 ? styles.marker1 : styles.marker),
        backgroundColor: colors.backgroundDark400,
        opacity: fadeAnim,
        transform: [{scale: fadeAnim2}],
        margin: 50,
      }}>
      <TouchableOpacity
        onPress={() => {
          console.log('marker pressed');
          navigation.navigate('Home', {
            screen: 'Map',
            params: {screen: 'Event', params: {eventID: marker.id}},
          });
        }}>
        {marker.theme === 1 ? (
          <MarkerTheme1 marker={marker} />
        ) : (
          <MarkerTheme0 marker={marker} />
        )}
      </TouchableOpacity>
      {/*<Text style={styles.markerText}>{marker.type}</Text>*/}
    </Animated.View>
  );
}

function getEventAvatars(marker: EventType, length: number) {
  const avatars = [
    {
      src: tate,
      alt: 'Sandeep Srivastva',
      color: '$emerald600',
    },
    {
      src: 'https://image.stern.de/32707724/t/o5/v2/w1440/r1.7778/-/andrew-tate.jpg',
      alt: 'Arjun Kapoor',
      color: '$cyan600',
    },
    {
      src: 'https://image.stern.de/32707724/t/o5/v2/w1440/r1.7778/-/andrew-tate.jpg',
      alt: 'Ritik Sharma ',
      color: '$indigo600',
    },
    {
      src: 'https://image.stern.de/32707724/t/o5/v2/w1440/r1.7778/-/andrew-tate.jpg',
      alt: 'Akhil Sharma',
      color: '$gray600',
    },
    {
      src: 'https://image.stern.de/32707724/t/o5/v2/w1440/r1.7778/-/andrew-tate.jpg',
      alt: 'Rahul Sharma ',
      color: '$red400',
    },
  ];
  const extraAvatars = avatars.slice(length);
  const remainingCount = extraAvatars.length > 99 ? 99 : extraAvatars.length;

  return {avatars, remainingCount};
}

function MarkerTheme1({marker}: {marker: EventType}) {
  const colors = store.getState().nonSaveVariables.theme.colors;

  return (
    <React.Fragment>
      <Image source={tate} style={styles.markerImage1} />
    </React.Fragment>
  );
}

function MarkerTheme0({marker}: {marker: EventType}) {
  const colors = store.getState().nonSaveVariables.theme.colors;

  const {avatars, remainingCount} = getEventAvatars(marker, 3);

  return (
    <React.Fragment>
      <Image source={tate} style={styles.markerImage} />
      {
        <AvatarGroup style={styles.avatarGroup}>
          {[
            remainingCount > 0 ? (
              <Avatar
                key="remaining"
                size="sm"
                borderColor="$backgroundDark400"
                borderWidth="$2"
                bg="$backgroundDark200"
                style={{flexShrink: 0, minWidth: 16}}>
                <Text
                  style={{
                    color: colors.textLight0,
                    textAlign: 'center',
                    fontWeight: 'bold',
                  }}
                  numberOfLines={1}>
                  +{remainingCount}
                </Text>
              </Avatar>
            ) : (
              <></>
            ),
            ...avatars.slice(0, 3).map((avatar, index) => (
              <Avatar
                key={index}
                size="sm"
                borderColor="$backgroundDark400"
                borderWidth="$2"
                bg={avatar.color}>
                <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
                <AvatarImage source={avatar.src} alt={avatar.alt} />
              </Avatar>
            )),
          ]}
        </AvatarGroup>
      }
    </React.Fragment>
  );
}

const styles = StyleSheet.create({
  marker: {
    padding: 3,
    borderRadius: 10,
  },
  marker1: {
    padding: 3,
    borderRadius: (90 + 3 * 2) / 2,
  },
  markerImage: {
    borderRadius: 10 - 3,
    width: 160,
    height: 100,
    alignSelf: 'center',
  },
  markerImage1: {
    borderRadius: 90 / 2,
    width: 90,
    height: 90,

    alignSelf: 'center',
  },
  markerText: {
    color: 'white',
    fontWeight: 'bold',
  },
  avatarGroup: {
    position: 'absolute',
    top: -8 - 5,
    //right: -8 - 5,
    right: -5,
  },
});
