import React, { useRef, useState } from 'react';
import { ImageBackground, Platform, SafeAreaView, View } from 'react-native';
import { KeyboardAccessoryView } from 'react-native-keyboard-accessory';
import { useNavigation, useRoute } from '@react-navigation/native';
import Constants from 'expo-constants';
import { StatusBar } from 'expo-status-bar';

import { MentionList } from '../../components';
import { Icon, TextInputType } from '../../core-ui';
import { UploadTypeEnum } from '../../generated/server/globalTypes';
import {
  createReactNativeFile,
  errorHandlerAlert,
  mentionHelper,
  useStorage,
} from '../../helpers';
import { useMention, useReplyPost } from '../../hooks';
import { makeStyles, useTheme } from '../../theme';
import { CursorPosition, StackNavProp, StackRouteProp } from '../../types';

import { ReplyInputField } from './components';

const ios = Platform.OS === 'ios';

export default function ImagePreview() {
  const styles = useStyles();
  const { colors } = useTheme();

  const { navigate, goBack } = useNavigation<StackNavProp<'ImagePreview'>>();

  const { params } = useRoute<StackRouteProp<'ImagePreview'>>();
  const { topicId, imageUri, postPointer, message } = params;

  const [loading, setLoading] = useState(false);
  const [imageMessage, setImageMessage] = useState(message);
  const [cursorPosition, setCursorPosition] = useState<CursorPosition>({
    start: 0,
    end: 0,
  });
  const [showUserList, setShowUserList] = useState(false);
  const [mentionLoading, setMentionLoading] = useState(false);
  const [mentionKeyword, setMentionKeyword] = useState('');

  const messageRef = useRef<TextInputType>(null);

  const user = useStorage().getItem('user');

  const { reply } = useReplyPost({
    onCompleted: () => {
      navigate('MessageDetail', {
        id: topicId,
        postPointer: postPointer + 1,
        emptied: true,
        hyperlinkUrl: '',
        hyperlinkTitle: '',
      });
    },
    onError: (error) => {
      setLoading(false);
      errorHandlerAlert(error);
    },
  });

  const { mentionMembers } = useMention(
    mentionKeyword,
    showUserList,
    setMentionLoading,
  );

  const reactNativeFile = createReactNativeFile(imageUri);

  const postToServer = (caption: string) => {
    setLoading(true);
    reply({
      variables: {
        replyInput: {
          topicId,
          raw: caption,
        },
        file: reactNativeFile,
        userId: user?.id,
        type: UploadTypeEnum.composer,
      },
    });
  };

  const onPressCancel = () => {
    goBack();
  };

  const footer = (
    <View>
      <MentionList
        showUserList={showUserList}
        members={mentionMembers}
        mentionLoading={mentionLoading}
        rawText={imageMessage}
        textRef={messageRef}
        setRawText={setImageMessage}
        setShowUserList={setShowUserList}
        viewStyle={styles.mentionList}
        fontStyle={styles.mentionText}
      />
      <View style={styles.inputContainer}>
        <ReplyInputField
          inputRef={messageRef}
          onSelectedChange={(cursor) => {
            setCursorPosition(cursor);
          }}
          onChangeValue={(imageMessage: string) => {
            mentionHelper(
              imageMessage,
              cursorPosition,
              setShowUserList,
              setMentionLoading,
              setMentionKeyword,
            );
            setImageMessage(imageMessage);
          }}
          showButton
          inputPlaceholder={t('Write your caption here')}
          loading={loading}
          disabled={loading}
          onPressSend={postToServer}
          style={styles.inputField}
          message={imageMessage}
          setMessage={setImageMessage}
        />
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <StatusBar style={'light'} />
      <SafeAreaView style={styles.fullContainer}>
        <ImageBackground
          source={{ uri: imageUri }}
          resizeMode="contain"
          style={styles.fullContainer}
        >
          <Icon
            name="Close"
            color={colors.pureWhite}
            onPress={onPressCancel}
            disabled={loading}
            style={styles.iconContainer}
          />
        </ImageBackground>
        <KeyboardAccessoryView
          androidAdjustResize
          inSafeAreaView
          alwaysVisible
          style={styles.inputViewContainer}
        >
          {footer}
        </KeyboardAccessoryView>
      </SafeAreaView>
    </View>
  );
}

const useStyles = makeStyles(({ colors, spacing }) => ({
  container: {
    flexGrow: 1,
    backgroundColor: colors.pureBlack,
    paddingTop: ios ? 0 : Constants.statusBarHeight,
  },
  fullContainer: {
    flexGrow: 1,
  },
  iconContainer: {
    width: 32,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    borderRadius: 100,
    padding: spacing.xxl,
    marginTop: spacing.m,
    marginLeft: ios ? spacing.l : spacing.xl,
  },
  inputViewContainer: {
    paddingTop: spacing.s,
    backgroundColor: 'transparent',
  },
  inputContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: spacing.xxl,
    paddingVertical: spacing.xl,
  },
  inputField: {
    marginBottom: spacing.xl,
    paddingVertical: spacing.s,
    paddingLeft: spacing.xl,
    paddingRight: spacing.s,
  },
  mentionList: {
    backgroundColor: colors.darkTransparentBackground,
  },
  mentionText: {
    color: colors.pureWhite,
  },
}));