import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {Fragment, useRef, useState} from 'react';
import {
  Alert,
  Image,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  // Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {MentionInput} from 'react-native-controlled-mentions';
import {Button} from 'react-native-elements';
import {useDispatch, useSelector} from 'react-redux';
import {SearchBackground} from '../../components';
import {CaptionScreenHeader} from '../../components/';
// import Draggable from '../../components/common/Draggable';
import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
// import TaggDraggable from '../../components/taggs/TaggDraggable';
import {TAGG_LIGHT_BLUE_2} from '../../constants';
import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
import {MainStackParams} from '../../routes';
import {postMoment} from '../../services';
import {
  loadUserMoments,
  updateProfileCompletionStage,
} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
import {mentionPartTypes} from '../../utils/comments';
// import {TouchableOpacity} from 'react-native-gesture-handler';

/**
 * Upload Screen to allow users to upload posts to Tagg
 */
type CaptionScreenRouteProp = RouteProp<MainStackParams, 'CaptionScreen'>;
type CaptionScreenNavigationProp = StackNavigationProp<
  MainStackParams,
  'CaptionScreen'
>;
interface CaptionScreenProps {
  route: CaptionScreenRouteProp;
  navigation: CaptionScreenNavigationProp;
}
interface momentTag {
  userID: string;
  username: string;
  xLocation: number;
  yLocation: number;
}

const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
  const {title, image, screenType} = route.params;
  const {
    user: {userId},
  } = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch();
  const [caption, setCaption] = useState('');
  const [loading, setLoading] = useState(false);
  // const [isTop, setIsTop] = useState(false);
  const imageRef = useRef(null);

  // const zIndex = [0, 999];
  // const [offset, setOffset] = useState([0, 0]);
  // const [curStart, setCurStart] = useState([0, 0]);
  // const [imageDimensions, setImageDimensions] = useState([0, 0]);

  // created a state variable to keep track of every tag
  // idea is that each element in the list
  // const [taggList, setTaggList] = useState([
  //   {
  //     first_name: 'Ivan',
  //     id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
  //     last_name: 'Chen',
  //     thumbnail_url:
  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
  //     username: 'ivan.tagg',
  //   },
  //   {
  //     first_name: 'Ankit',
  //     id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
  //     last_name: 'Thanekar',
  //     thumbnail_url:
  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
  //     username: 'ankit.thanekar',
  //   },
  // ]);
  // state variables used to position draggables

  // state var used to keep track of draggable z ordering
  // const [layerOrder, setLayerOrder] = useState<string[]>([]);
  // created a test user - BUG - failed to register a profile visit -
  // const testUser: UserType = {
  //   userId: 'ID-1234-567',
  //   username: 'dragonofthewest',
  // };

  const navigateToProfile = () => {
    //Since the logged In User is navigating to own profile, useXId is not required
    navigation.navigate('Profile', {
      screenType,
      userXId: undefined,
    });
  };
  /**
   * Helper function that we use to keep track of which element should be on top most layer
   * @param index
   */
  // const bringToFront = (index: number) => {
  //   let currUser = taggList[index].id;
  //   if (layerOrder.includes(currUser)) {
  //     layerOrder.splice(layerOrder.indexOf(currUser), 1);
  //   }
  //   layerOrder.push(currUser);
  //   setLayerOrder(layerOrder);
  // };

  /**
   * Helper function that tells us if the current draggable is the topmost one.
   * @param index
   */
  // const isOnTop = (index: number) => {
  //   let currUser = taggList[index].id;
  //   return currUser === layerOrder[0];
  // };
  /**
   * function that sets the initial position of each newly created tag
   * @returns
   */

  /**
   * need a handler to take care of creating a tagged user object, append that object to the taggList state variable.
   * @returns
   */

  // useEffect(() => {
  //   imageRef.current.measure((fx, fy, width, height, px, py) => {
  //     console.log('Component width is: ' + width);
  //     console.log('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);
  //     setOffset([px, py]);
  //     setImageDimensions([width, height]);
  //   });
  // }, []);

  const handleShare = async () => {
    setLoading(true);
    if (!image.filename) {
      return;
    }
    postMoment(image.filename, image.path, caption, title, userId).then(
      (data) => {
        setLoading(false);
        if (data) {
          dispatch(loadUserMoments(userId));
          dispatch(updateProfileCompletionStage(data));
          navigateToProfile();
          setTimeout(() => {
            Alert.alert(SUCCESS_PIC_UPLOAD);
          }, 500);
        } else {
          setTimeout(() => {
            Alert.alert(ERROR_UPLOAD);
          }, 500);
        }
      },
    );
  };

  return (
    <SearchBackground>
      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.flex}>
          <View style={styles.contentContainer}>
            <View style={styles.buttonsContainer}>
              <Button
                title="Cancel"
                buttonStyle={styles.button}
                onPress={() => navigateToProfile()}
              />
              <Button
                title="Share"
                titleStyle={styles.shareButtonTitle}
                buttonStyle={styles.button}
                onPress={handleShare}
              />
            </View>
            <CaptionScreenHeader style={styles.header} {...{title: title}} />
            {/* this is the image we want to center our tags' initial location within */}
            <Image
              ref={imageRef}
              style={styles.image}
              source={{uri: image.path}}
              resizeMode={'cover'}
            />
            <MentionInput
              containerStyle={styles.text}
              placeholder="Write something....."
              placeholderTextColor="gray"
              value={caption}
              onChange={setCaption}
              partTypes={mentionPartTypes('blue')}
            />
            {/* Draggables - Commented out for now */}
            {/* <Draggable
              // ivan
              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
              z={999}
              minX={offset[0]}
              minY={offset[1]}
              maxX={imageDimensions[0] + offset[0]}
              maxY={imageDimensions[1] + offset[1]}
              onDragStart={() => bringToFront(0)}>
              <TaggDraggable
                taggedUser={taggList[0]}
                editingView={true}
                deleteFromList={() => console.log('Hello world')}
                setStart={setCurStart}
              />
            </Draggable>
            <Draggable
              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
              z={0}
              minX={offset[0]}
              minY={offset[1]}
              maxX={imageDimensions[0] + offset[0]}
              maxY={imageDimensions[1] + offset[1]}
              onDragStart={() => bringToFront(1)}>
              <TaggDraggable
                taggedUser={taggList[1]}
                editingView={true}
                deleteFromList={() => console.log('Hello world')}
                setStart={setCurStart}
              />
            </Draggable> */}
          </View>
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    </SearchBackground>
  );
};
const styles = StyleSheet.create({
  contentContainer: {
    paddingTop: StatusBarHeight,
    justifyContent: 'flex-end',
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '5%',
    marginRight: '5%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  shareButtonTitle: {
    fontWeight: 'bold',
    color: TAGG_LIGHT_BLUE_2,
  },
  header: {
    marginVertical: 20,
  },
  image: {
    position: 'relative',
    width: SCREEN_WIDTH,
    aspectRatio: 1,
    marginBottom: '3%',
  },
  text: {
    position: 'relative',
    backgroundColor: 'white',
    width: '100%',
    paddingHorizontal: '2%',
    paddingVertical: '1%',
    height: 60,
  },
  flex: {
    flex: 1,
  },
});

export default CaptionScreen;