import { Button, Separator, Text, View, YStack, isWeb } from '@my/ui'
import { JunwonLogoIcon } from 'app/assets/icon'
import { useSupabase } from 'app/utils/supabase/useSupabase'
import { useUser } from 'app/utils/useUser'
import { useLink } from 'solito/link'
import { useRouter } from 'solito/router'

function ControlPageInnerButton({ buttonText, onPress }) {
  const buttonStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 500,
      }
    : { fontFamily: 'SplineSansMedium' }

  return (
    <View ai={'center'} jc={'center'} m="$3">
      <Button unstyled onPress={onPress}>
        <Text
          style={buttonStyle}
          transform={[{ scaleX: 1.03 }, { scaleY: 0.95 }]}
          fontSize="$5"
          letterSpacing={0.3}
          lineHeight={isWeb ? '$6' : '$8'}
          color={'#06CAEB'}
          textDecorationLine="none"
        >
          {buttonText}
        </Text>
      </Button>
    </View>
  )
}

export function AccountControlPage() {
  const { user, isLoading } = useUser()
  const router = useRouter()

  return (
    <View style={{ flex: 1 }}>
      <YStack>
        <View als="center" m="$8" {...useLink({ href: '/control' })}>
          <JunwonLogoIcon />
        </View>
        <Separator />
        {!isLoading && user ? (
          <>
            <ControlPageInnerButton
              buttonText={'Delete Account'}
              onPress={() => router.push('/control/account-control/delete-account')}
            />
            <Separator />
          </>
        ) : null}
      </YStack>
    </View>
  )
}