import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Dialog, InputClassic} from '@components';
import {MAX_INPUT_LENGTH} from '@shared/constants';

interface Props {
  isVisible: boolean;
  title: string;
  onAccept: (title: string) => void;
}

function TitleModal({isVisible, title, onAccept}: Props) {
  const {t} = useTranslation();
  const [text, setText] = useState(title);

  const onConfirmAction = () => {
    onAccept(text);
  };

  return (
    <Dialog
      footer={{
        infoText: t('general.max_characters', {maxLength: MAX_INPUT_LENGTH}),
        primaryButton: {
          onPress: onConfirmAction,
          text: t('general.save'),
        },
      }}
      isVisible={isVisible}
      onClose={onConfirmAction}
      title={t('group.group_name')}>
      <InputClassic
        autoFocus
        useBottomSheetTextInput
        placeholder={t('group.group_name')}
        maxLength={MAX_INPUT_LENGTH}
        onChangeText={setText}
        scrollEnabled={false}
        value={text}
      />
    </Dialog>
  );
}

export default TitleModal;