import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Button, Text, useTheme } from 'react-native-paper';
import { useDispatch } from 'react-redux';
import { openDocumentTree } from 'react-native-scoped-storage';
import { noOp } from '../utilities';
import { setStorageUri } from '../state';

const welcomeStyles = StyleSheet.create({
  view: {
    paddingHorizontal: '4%',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  text: {
    marginBottom: 30,
    textAlign: 'center',
  },
  button: {
    marginBottom: 100,
  },
});

const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  const { colors } = useTheme();
  const dispatch = useDispatch();

  const selectStorageLocation = async () => {
    const uri = await openDocumentTree(true).catch(noOp);
    if (!uri) return;
    await dispatch(setStorageUri(uri.uri));
    onWelcomeComplete();
  };

  return (
    <View style={[welcomeStyles.view, { backgroundColor: colors.background }]}>
      <Text variant="displayMedium" style={welcomeStyles.text}>
        Welcome to Terminally Online!
      </Text>
      <Button
        mode="contained"
        onPress={selectStorageLocation}
        style={welcomeStyles.button}>
        Select Storage Location
      </Button>
    </View>
  );
};

export default Welcome;