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

interface TaggDraggableProps {
  draggable?: boolean;
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
  taggedUser: UserType;
  redirect: boolean;
  deleteFromList: () => void;
  setStart: 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 gotoTaggedProfile = (userID: string) => {
    //Since the logged In User is navigating to own profile, useXId is not required
    navigation.navigate('Profile', {
      ScreenType,
      userXId: userID,
    });
  };

  const {
    draggable,
    minX,
    minY,
    maxX,
    maxY,
    taggedUser,
    redirect,
    deleteFromList,
    setStart,
  } = props;
  let uriTip = require('../../assets/images/tagg-tip.png');
  let uriX = require('../../assets/images/draggableX.png');

  const draggableRef = useRef(null);

  useEffect(() => {
    draggableRef.current.measure((fx, fy, width, height, px, py) => {
      console.log('Drag Component width is: ' + width);
      console.log('Drag Component height is: ' + height);
      console.log('X offset to frame: ' + fx);
      console.log('Y offset to frame: ' + fy);
      console.log('X offset to page: ' + px);
      console.log('Y offset to page: ' + py);
      setStart([width, height]);
    });
  }, []);

  return (
    <TouchableWithoutFeedback>
      <View
        style={styles.container}
        onLayout={(event) => console.log(event.nativeEvent.layout)}>
        <TouchableOpacity
          onPressIn={() => gotoTaggedProfile(taggedUser.userId)}
          disabled={redirect}
          style={[styles.button]}
          ref={draggableRef}>
          <TaggAvatar
            style={styles.avatar}
            screenType={ScreenType.Profile}
            editable={false}
            userXId={taggedUser.userId}
          />
          <Text style={styles.buttonTitle}>@{taggedUser.username}</Text>
          {redirect && (
            <TouchableOpacity
              disabled={false}
              onPressIn={() => deleteFromList()}>
              <Image style={styles.imageX} source={uriX} />
            </TouchableOpacity>
          )}
        </TouchableOpacity>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    color: 'red',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: normalize(42),
    marginBottom: '5%',
  },
  bodyContainer: {
    color: 'blue',
    flexDirection: 'column',
    height: normalize(42),
    justifyContent: 'space-around',
  },
  label: {
    fontWeight: '500',
    fontSize: normalize(14),
  },
  rectangle: {
    width: 100 * 2,
    height: 100,
    borderRadius: 25,
    paddingLeft: 10,
    paddingBottom: 0,
    paddingTop: 10,
  },
  buttonTitle: {
    color: 'white',
    fontSize: normalize(11),
    fontWeight: '700',
    lineHeight: normalize(13.13),
    letterSpacing: normalize(0.6),
    paddingHorizontal: '1.5%',
  },
  avatar: {
    marginLeft: '4%',
    marginRight: '-1%',
    flex: 0.45,
    aspectRatio: 1,
  },
  inviteButton: {
    backgroundColor: 'transparent',
  },
  imageRectangle: {
    backgroundColor: 'black',
    borderWidth: 2,
    borderRadius: 2,
  },
  imageTip: {
    backgroundColor: 'black',
  },
  imageX: {
    width: normalize(15),
    height: normalize(15),
    marginRight: '-15%',
  },
  pendingButtonTitle: {
    color: 'white',
  },
  button: {
    paddingLeft: 1,
    paddingTop: 3,
    paddingBottom: 3,
    // justifyContent: 'space-evenly',
    alignSelf: 'flex-start',
    alignItems: 'center',
    borderWidth: 1.5,
    borderRadius: 20,
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
});

export default TaggDraggable;