import * as Updates from 'expo-updates'
import { useContext, useState } from 'react'
import { ScrollView, Text, View, Alert, AsyncStorage } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { AutoLayout } from '../components/AutoLayout'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { useGet } from '../components/Network'
import { UserContext } from '../contexts/UserContext'
import { useNetwork } from '../hooks/useNetwork'
import { useScreenRefreshControl } from '../hooks/useScreenRefreshControl'
import * as SecureStore from '../secure-store'
import { useUser } from '../user'
import { SettingsScreenButton } from './SettingsScreen'

function useErrorTesting(enabled: boolean) {
  const user = useContext(UserContext)
  const path = enabled ? 'api/developer/error' : null
  return useNetwork(useGet(path, user))
}

export const DeveloperScreen: React.FC = () => {
  const screenName = 'Developer Screen'

  const { setUpdateSeenVersion } = useUser()

  const [sendErrorRequest, setSendErrorRequest] = useState(false)
  const { error, refreshing } = useErrorTesting(sendErrorRequest)

  const { refreshControl } = useScreenRefreshControl(() => {}, refreshing)

  return (
    <CommonScreenContainer screenName={screenName}>
      <ErrorBoundary error={error} refreshControl={refreshControl}>
        <View style={{ height: 125, padding: 16, justifyContent: 'flex-end' }}>
          <Text style={[TextStyles.h4, { color: colors.white, height: 48 }]}>
            {screenName}
          </Text>
        </View>
        <ScrollView style={{ padding: 16 }}>
          <AutoLayout gap={10}>
            <SettingsScreenButton
              text="Erase all local user data"
              onPress={async () => {
                try {
                  await Promise.all([AsyncStorage.clear(), SecureStore.clear()])
                  Alert.alert('Erased!', 'Local user data erased')
                  Updates.reloadAsync()
                } catch (e) {
                  Alert.alert(
                    'Error',
                    'Error erasing user data, probably already empty'
                  )
                }
              }}
            />
            <SettingsScreenButton
              text={`Reset "What's new" popup`}
              onPress={async () => {
                try {
                  await setUpdateSeenVersion(null)
                  Alert.alert('Reset!', `Reset "What's new" popup`)
                  Updates.reloadAsync()
                } catch (e) {
                  Alert.alert('Error', "Error resetting What's new version")
                }
              }}
            />
            <SettingsScreenButton
              text="Send request that will trigger error in the backend"
              onPress={() => setSendErrorRequest(true)}
            />
          </AutoLayout>
        </ScrollView>
      </ErrorBoundary>
    </CommonScreenContainer>
  )
}