import React, {useCallback, useState} from 'react';
import {ScrollView, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BasePost, CardContainer, Pill, Post} from '@components';
import {Navigation} from '@interfaces/navigation';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import DraftOptionsDialog from './components/OptionsDialog';
import {styles} from './styles';
import StatusAlert from './components/StatusAlert';
import DetailFooter from './components/DetailFooter';

function DraftDetails({route}: Navigation<Screens.DRAFT_DETAILS>) {
  const {draft, mine} = route.params;
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {bottom} = useSafeAreaInsets();
  const [draftOptionsDialogOpen, setDraftOptionsDialogOpen] = useState(false);

  const onCloseDraftOptionsDialog = () => setDraftOptionsDialogOpen(false);

  const onOpenDraftOptionsDialog = () => setDraftOptionsDialogOpen(true);

  const renderDescription = useCallback(
    () => (
      <Pill text={draft.post.group?.title || t('home.wall')} variant="info" />
    ),
    [draft.post.group, t],
  );

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.elements.grey,
          paddingBottom: bottom,
        },
      ]}>
      <View style={styles.content}>
        <ScrollView>
          {draft.isScheduled && (
            <View style={styles.alertContainer}>
              <StatusAlert draft={draft} />
            </View>
          )}
          <CardContainer style={styles.cardContainer}>
            <Post
              style={styles.postContainer}
              onPressOptions={onOpenDraftOptionsDialog}
              withOptions={!mine}
              post={
                {...draft.post, user: draft.draftPermission.userTo} as BasePost
              }
              creatorUser={draft.draftPermission.userFrom}
              renderDescription={renderDescription}
            />
          </CardContainer>
        </ScrollView>
      </View>
      <DetailFooter draft={draft} mine={mine} />
      <DraftOptionsDialog
        mine={mine}
        draft={draftOptionsDialogOpen ? draft : null}
        onClose={onCloseDraftOptionsDialog}
      />
    </View>
  );
}

export default DraftDetails;