import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconTrash} from '@tabler/icons-react-native';
import {BottomSheetView} from '@gorhom/bottom-sheet';
import {BottomModalRoot, ListRow, Pill, Typography} from '@components';
import {BasePost, Post} from '@components/_custom';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Post as PostType} from '@modules/post/interfaces';
import {SPACING, useTheme} from '@shared/theme';

import {styles} from './styles';
import DeletePostModal from './components/DeletePostModal';

interface Props {
  item: PostType;
  requestId: number;
  isEdited?: boolean;
}

function BottomSheetPost({item, requestId, isEdited}: Props) {
  const {t} = useTranslation();
  const [showModal, setShowModal] = useState(false);
  const paddingBottom = useSafeAreaBottomPadding();
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const {theme} = useTheme();
  const onOpenModal = () => setShowModal(true);
  const onCloseModal = () => setShowModal(false);
  const onOpenDeleteModal = () => setShowDeleteModal(true);
  const onCloseDeleteModal = () => {
    setShowDeleteModal(false);
    onCloseModal();
  };
  return (
    <View>
      <ListRow.CardContainer>
        <Post
          style={styles.post}
          post={item as BasePost}
          onPressOptions={onOpenModal}
          TitleRightComponent={
            isEdited ? (
              <Pill
                text={t('post.edited')}
                variant="info"
                size="md"
                style={styles.editedPill}
              />
            ) : undefined
          }
          withOptions
        />
      </ListRow.CardContainer>
      <BottomModalRoot isVisible={showModal} onClose={onCloseModal}>
        <BottomSheetView
          style={[styles.content, {paddingBottom: paddingBottom + SPACING.x1}]}>
          {showDeleteModal ? (
            <DeletePostModal
              item={item}
              requestId={requestId}
              onAccept={onCloseDeleteModal}
              onCancel={onCloseDeleteModal}
              isEdited={isEdited}
            />
          ) : (
            <ListRow onPress={onOpenDeleteModal}>
              <ListRow.Avatar Icon={IconTrash} />
              <Typography
                align="left"
                weight="semiBold"
                color={theme.text.feedback.error}
                numberOfLines={1}>
                {t(isEdited ? 'post.delete_edit_request' : 'post.delete')}
              </Typography>
            </ListRow>
          )}
        </BottomSheetView>
      </BottomModalRoot>
    </View>
  );
}

export default BottomSheetPost;