import {useNavigation} from '@react-navigation/native';
import React, {useState} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Draggable from 'react-native-draggable';
import {ScreenType, UserType} from '../../types';
import {
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  navigateToProfile,
} from '../../utils';
import TaggAvatar from '../profile/TaggAvatar';
import {RootState} from '../../store/rootReducer';
import {useStore, useDispatch} from 'react-redux';

interface TaggDraggableProps {
  draggable?: boolean;
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
  taggedUser: UserType;
  redirect: boolean;
  deleteFromList: Function;
}

const TaggDraggable: React.FC<TaggDraggableProps> = (
  props: TaggDraggableProps,
) => {
  const [xCoord, setXcoord] = useState<number>(SCREEN_HEIGHT / 2);
  const [yCoord, setYcoord] = useState<number>(SCREEN_WIDTH / 2);
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const state: RootState = useStore().getState();
  const {
    draggable,
    minX,
    minY,
    maxX,
    maxY,
    taggedUser,
    redirect,
    deleteFromList,
  } = props;
  let uriTip = require('../../assets/images/tagg-tip.png');
  let uriX = require('../../assets/images/tagg-x-button.png');

  // <Image style={styles.image} source={uri} />

  /**
   * This function returns x,y pairing for each tagg.
   */
  // const getCoords = () => {
  //   return [xCoord, yCoord];
  // };
  const renderTagg = () => {
    return (
      <View style={styles.container}>
        {/* user profile pic */}
        <TouchableOpacity style={styles.imageRectangle}>
          <TaggAvatar
            screenType={ScreenType.Profile}
            editable={false}
            userXId={undefined}
          />
          {/* @username  */}
          <Text
            onPress={() =>
              navigateToProfile(
                state,
                dispatch,
                navigation,
                ScreenType.Profile,
                taggedUser,
              )
            }>
            {taggedUser.userId}
          </Text>
          {/* x button */}
          <Image style={styles.imageTip} source={uriTip} />
          <TouchableOpacity onPress={() => deleteFromList()}>
            <Image style={styles.imageX} source={uriX} />
          </TouchableOpacity>
        </TouchableOpacity>
      </View>
    );
  };
  if (redirect) {
    if (draggable) {
      return (
        <View style={styles.container}>
          {console.log("this guy's userid is: " + taggedUser.userId)}
          <Draggable
            minX={minX}
            minY={minY}
            maxX={maxX}
            maxY={maxY}
            onDragRelease={(_, gestureState) => {
              setXcoord(gestureState.moveX);
              setYcoord(gestureState.moveY);
            }}>
            <TouchableOpacity style={styles.imageRectangle}>
              <TaggAvatar
                screenType={ScreenType.Profile}
                editable={false}
                userXId={undefined}
              />
              <Text>{taggedUser.userId}</Text>
              <Image style={styles.imageTip} source={uriTip} />
              <TouchableOpacity onPress={() => deleteFromList()}>
                <Image style={styles.imageX} source={uriX} />
              </TouchableOpacity>
            </TouchableOpacity>
          </Draggable>
          <TouchableOpacity style={styles.imageRectangle}>
            <Text>{taggedUser.userId}</Text>
            <Image style={styles.imageTip} source={uriTip} />
            <TouchableOpacity onPress={() => deleteFromList()}>
              <Image style={styles.imageX} source={uriX} />
            </TouchableOpacity>
          </TouchableOpacity>
        </View>
      );
    } else {
      return renderTagg();
    }
  } else {
    return renderTagg();
  }
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: normalize(42),
    marginBottom: '5%',
  },
  bodyContainer: {
    flexDirection: 'column',
    height: normalize(42),
    justifyContent: 'space-around',
  },
  inviteButton: {
    backgroundColor: 'transparent',
  },
  imageRectangle: {
    width: '100%',
    height: '100%',
    backgroundColor: 'black',
    borderWidth: 2,
    borderRadius: 2,
  },
  imageTip: {
    backgroundColor: 'black',
  },
  imageX: {
    width: '100%',
    height: '100%',
  },
});

export default TaggDraggable;