import React from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, Text } from 'react-native-paper';

import styles from '../styles/stylesheet';
import GridView from './Grid';

type CustomDialogProps = {
  visible: boolean;
  hideDialog: () => void;
  contentText: string;
  titleText?: string;
};

const DialogComponent: React.FC<CustomDialogProps> = ({
  visible,
  hideDialog,
  contentText,
}) => {
  const words = contentText.split(' ');

  return (
    <Portal>
      <Dialog visible={visible} onDismiss={hideDialog}>
        <Dialog.Content>
          <Text variant="titleLarge">Mnemonic</Text>
          <View style={styles.dialogTitle}>
            <Text variant="titleMedium">
              Your mnemonic provides full access to your wallet and funds. Make
              sure to note it down.{' '}
            </Text>
            <Text variant="titleMedium" style={styles.dialogWarning}>
              Do not share your mnemonic with anyone
            </Text>
            <GridView words={words} />
          </View>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onPress={hideDialog}>Done</Button>
        </Dialog.Actions>
      </Dialog>
    </Portal>
  );
};

export { DialogComponent };