import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useController} from 'react-hook-form';
import {TextInput} from '@components/_core/TextInput';

import {PublishPostField} from '../../interfaces';
import {styles} from './styles';

interface Props {
  isEditing: boolean;
}

export function PublishInputController({isEditing}: Props) {
  const {t} = useTranslation();
  const {field} = useController({name: PublishPostField.Body});

  return (
    <View style={styles.container}>
      <TextInput
        multiline
        autoFocus={!isEditing}
        defaultValue={field.value}
        onBlur={field.onBlur}
        onChangeText={field.onChange}
        editable
        placeholder={t('general.write_something')}
        textAlignVertical="top"
      />
    </View>
  );
}
