import {useNavigation} from '@react-navigation/native';
import React, {useState} from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  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';
import {Button} from 'react-native-share';
import {userBlockFetched} from 'src/store/reducers';
import {color} from 'react-native-reanimated';

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/draggableX.png');

  return (
    <TouchableWithoutFeedback>
      <View style={styles.container}>
        <TouchableOpacity disabled={true} style={[styles.button]}>
          <TaggAvatar
            style={styles.avatar}
            screenType={ScreenType.Profile}
            editable={false}
            userXId={undefined}
          />
          <Text style={styles.buttonTitle}>@{taggedUser.username}</Text>
          <TouchableOpacity disabled={false}>
            <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: '3.8%',
  },
  avatar: {
    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),
  },
  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',
    borderColor: 'black',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
});

export default TaggDraggable;