import {useNavigation} from '@react-navigation/core';
import React, {useEffect, useState} from 'react';
import {
  Alert,
  GestureResponderEvent,
  TextStyle,
  TouchableOpacity,
  ViewProps,
} from 'react-native';
import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
import {deleteMoment, sendReport} from '../../services';
import {MomentTagType, MomentType, ScreenType} from '../../types/types';
import {GenericMoreInfoDrawer} from '../common';

enum MomentDrawerOptions {
  DeleteMoment = 'Delete Moment',
  ReportIssue = 'Report an Issue',
  RemoveTag = 'Remove yourself from moment',
  EditMoment = 'Edit Moment',
}
interface MomentMoreInfoDrawerProps extends ViewProps {
  isOpen: boolean;
  setIsOpen: (visible: boolean) => void;
  isOwnProfile: boolean;
  momentTagId: string;
  removeTag: () => Promise<void>;
  dismissScreenAndUpdate: () => void;
  screenType: ScreenType;
  moment: MomentType;
  tags: MomentTagType[];
}

type DrawerButtonType = [
  string,
  (event: GestureResponderEvent) => void,
  JSX.Element?,
  TextStyle?,
][];

const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
  const {
    setIsOpen,
    isOwnProfile,
    dismissScreenAndUpdate,
    momentTagId,
    removeTag,
    screenType,
    moment,
    tags,
  } = props;

  const navigation = useNavigation();

  const [drawerButtons, setDrawerButtons] = useState<DrawerButtonType>([]);

  const handleDeleteMoment = async () => {
    setIsOpen(false);
    deleteMoment(moment.moment_id).then((success) => {
      if (success) {
        // set time out for UI transitions
        setTimeout(() => {
          Alert.alert(MOMENT_DELETED_MSG, '', [
            {
              text: 'OK',
              onPress: () => dismissScreenAndUpdate(),
              style: 'cancel',
            },
          ]);
        }, 500);
      } else {
        setTimeout(() => {
          Alert.alert(ERROR_DELETE_MOMENT);
        }, 500);
      }
    });
  };

  const handleRemoveTag = async () => {
    setIsOpen(false);
    setTimeout(() => {
      Alert.alert(
        MomentDrawerOptions.RemoveTag,
        'Are you sure you want to be removed from this moment?',
        [
          {
            text: 'Remove',
            onPress: removeTag,
          },
          {
            text: 'Cancel',
            style: 'cancel',
          },
        ],
        {cancelable: false},
      );
    }, 500);
  };

  const handleReportMoment = async () => {
    setIsOpen(false);
    setTimeout(() => {
      Alert.alert(
        'Report Issue',
        undefined,
        [
          {
            text: 'Mark as inappropriate',
            onPress: () =>
              sendReport(moment.moment_id, 'Mark as inappropriate'),
          },
          {
            text: 'Cancel',
            style: 'cancel',
          },
          {
            text: 'Mark as abusive',
            onPress: () => sendReport(moment.moment_id, 'Mark as abusive'),
          },
        ],
        {cancelable: false},
      );
    }, 500);
  };

  const handleEditMoment = async () => {
    setIsOpen(false);
    navigation.navigate('CaptionScreen', {
      screenType: screenType,
      selectedTags: tags,
      moment: moment,
      selectedCategory: moment.moment_category,
    });
  };

  /*
   *  Update bottom drawer options to contain/not contain 'remove tag' option
   */
  useEffect(() => {
    let newButtons: [
      string,
      (event: GestureResponderEvent) => void,
      JSX.Element?,
      TextStyle?,
    ][] = [];
    if (!isOwnProfile) {
      newButtons.push([
        MomentDrawerOptions.ReportIssue,
        handleReportMoment,
        undefined,
        {color: 'red'},
      ]);
      // should we have the "delete moment" option?
      if (momentTagId !== '') {
        newButtons.push([
          MomentDrawerOptions.RemoveTag,
          handleRemoveTag,
          undefined,
          {color: 'red'},
        ]);
      }
    } else {
      newButtons.push([
        MomentDrawerOptions.DeleteMoment,
        handleDeleteMoment,
        undefined,
        {color: 'red'},
      ]);
      newButtons.push([MomentDrawerOptions.EditMoment, handleEditMoment]);
    }
    setDrawerButtons(newButtons);
  }, [tags, momentTagId]);

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          setIsOpen(true);
        }}>
        <MoreIcon height={30} width={30} color={'white'} />
      </TouchableOpacity>
      <GenericMoreInfoDrawer
        {...props}
        showIcons={false}
        buttons={drawerButtons}
      />
    </>
  );
};

export default MomentMoreInfoDrawer;