import React, { useEffect, useState } from "react"
import { Switch, Text, TouchableOpacity, View, ViewStyle } from "react-native"
import { GlobalStyles } from "../../../utils/GlobalUtils"
import { ProfileSection } from "./ProfileSection"
import * as Linking from 'expo-linking'
import * as WebBrowser from 'expo-web-browser'
import { API_URL } from "../../../utils/RequestUtils"

interface ProfileLegalProps {
    openLegal: () => void
    legalCollapsed: boolean
}

export const ProfileLegal: React.FC<ProfileLegalProps> = ({openLegal, legalCollapsed}) => {    
    const BrowserLink: React.FC<{text:string, route:string, style?: ViewStyle}> = ({style, text, route}) => {
        return (
            <TouchableOpacity style={[{alignItems: 'center'}, style]} onPress={async () => await WebBrowser.openBrowserAsync(API_URL + "/" + route)}>
                <Text style={{fontWeight: 'bold', textDecorationLine:'underline'}}>{text}</Text>
            </TouchableOpacity>
        )
    }

    return (
        <ProfileSection isCollapsed={legalCollapsed} collapseToggleMethod={openLegal} title="Terms">
            <BrowserLink style={{marginBottom: 10}} text="MOBILE APP THIRD-PARTY LICENSES" route="mobile-tpl"/>
            <BrowserLink text="API THIRD-PARTY LICENSES" route="api-tpl"/>
        </ProfileSection>
    )
}