import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {NewPost, Pill, useStepper} from '@components';
import {userToAuthor} from '@components/_custom/NewPost/utils';
import {useTheme} from '@shared/theme';

import {Steps} from '../../../../interfaces';
import {styles} from './styles';
import {useLayout} from './hooks/useLayout';

function CreatePost() {
  const {t} = useTranslation();
  const {data} = useStepper<Steps>();
  const {theme} = useTheme();
  useLayout();

  const userTo = data.SELECT_AUTHOR!.userTo;
  const userFrom = data.SELECT_AUTHOR!.userFrom;
  const segmentationTitle = data.SELECT_GROUP?.postInFeed
    ? t('home.wall')
    : data.SELECT_GROUP?.groupSelected?.title;

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <NewPost.ScrollContainer>
        <NewPost.TopContainer>
          <NewPost.Author
            author={userToAuthor(userFrom)}
            target={userToAuthor(userTo)}>
            <Pill text={segmentationTitle} variant="info" />
          </NewPost.Author>
          <NewPost.Size />
        </NewPost.TopContainer>
        <NewPost.RichTextInput />
        <NewPost.Multimedia />
      </NewPost.ScrollContainer>
      <NewPost.Suggestions />
      <NewPost.PublishIcons />
    </View>
  );
}

const MemorizedCreatePost = memo(CreatePost);
export {MemorizedCreatePost as CreatePost};