import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {BasePost, Divider, Pill, Post, PostHeader} from '@components';
import {Post as PostI} from '@modules/post/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  post: PostI;
  editedBodyHtml: string;
}

export const EditedPost = ({post, editedBodyHtml}: Props) => {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const editedPost = useMemo(
    () => ({...post, bodyHtml: editedBodyHtml} as BasePost),
    [post, editedBodyHtml],
  );

  return (
    <>
      <PostHeader
        post={post as BasePost}
        TitleRightComponent={
          <Pill text={t('post.edited')} variant="info" size="md" />
        }
      />
      <View style={styles.content}>
        <View
          style={[
            styles.beforeSection,
            {backgroundColor: theme.background.layout.default},
          ]}>
          <Post
            post={post as BasePost}
            style={{backgroundColor: theme.background.layout.default}}
            HeaderComponent={
              <Pill
                text={t('general.before')}
                variant="neutral"
                size="md"
                style={styles.pill}
              />
            }
          />
        </View>
        <Divider />
        <Post
          post={editedPost}
          HeaderComponent={
            <Pill
              text={t('general.after')}
              variant="success"
              size="md"
              style={styles.pill}
            />
          }
        />
      </View>
    </>
  );
};
