import React from 'react';
import {Keyboard, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useWatch} from 'react-hook-form';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {DismissKeyboard} from '@components';
import {Typography} from '@components/_core/Typography';
import {Button, IconButton} from '@components/_HuGo/Button';
import {ListRow} from '@components/_HuGo/List';
import {useGetAttachmentsLimit} from '@hooks/useGetAttachmentsLimit';
import {useUser} from '@redux/selectors';
import {getCompleteName, getCurrentSizeString} from '@shared/utils';
import {useTheme} from '@shared/theme';

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

interface Props {
  disabled: boolean;
  isEditing: boolean;
  isLoading: boolean;
  onBackPress: () => void;
  onPublishPress: () => void;
}

export function PublishHeader({
  disabled,
  isEditing,
  isLoading,
  onBackPress,
  onPublishPress,
}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const user = useUser();
  const {maxSizeString} = useGetAttachmentsLimit();
  const attachmentsSize = useWatch({name: PublishPostField.AttachmentsSize});
  const userName = getCompleteName(user);

  return (
    <DismissKeyboard style={styles.container}>
      <View style={styles.header}>
        <IconButton
          Icon={IconArrowLeft}
          onPress={onBackPress}
          hitSlop={8}
          variant="tertiary"
        />
        <Button
          disabled={disabled}
          variant="primary"
          size="sm"
          text={t(isEditing ? 'general.edit' : 'post.publish')}
          isLoading={isLoading}
          onPress={onPublishPress}
        />
      </View>
      <ListRow onPress={Keyboard.dismiss}>
        <ListRow.Avatar name={userName} url={user.profilePicture} />
        <ListRow.Title title={userName} />
        {!!attachmentsSize && (
          <Typography color={theme.neutralTextLighter} variant="xs">
            {getCurrentSizeString(maxSizeString, attachmentsSize)}
          </Typography>
        )}
      </ListRow>
    </DismissKeyboard>
  );
}
