import * as StoreReview from 'expo-store-review';
import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';

import { useColorScheme } from '~/lib/useColorScheme';

let hasRequestedReview = false;

export default function RatingsIndicatorScreen() {
  const { colors, isDarkColorScheme } = useColorScheme();

  React.useEffect(() => {
    async function showRequestReview() {
      if (hasRequestedReview) return;
      try {
        if (await StoreReview.hasAction()) {
          await StoreReview.requestReview();
        }
      } catch (error) {
        console.log(
          'FOR ANDROID: Make sure you meet all conditions to be able to test and use it: https://developer.android.com/guide/playcore/in-app-review/test#troubleshooting',
          error
        );
      } finally {
        hasRequestedReview = true;
      }
    }
    const timeout = setTimeout(() => {
      showRequestReview();
    }, 1000);

    return () => clearTimeout(timeout);
  }, []);

  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Ratings Indicator
          </Text>
          <View className="gap-3">
            <Text className="text-foreground pb-2 text-center font-semibold">
              Please follow the guidelines.
            </Text>
            <View className="flex-row">
              <Text className="text-muted-foreground w-6 text-center">·</Text>
              <View className="flex-1">
                <Text className="text-muted-foreground text-xs">
                  Don't call StoreReview.requestReview() from a button
                </Text>
              </View>
            </View>
            <View className="flex-row">
              <Text className="text-muted-foreground w-6 text-center">·</Text>
              <View className="flex-1">
                <Text className="text-muted-foreground text-xs">
                  Don't request a review when the user is doing something time sensitive.
                </Text>
              </View>
            </View>
            <View className="flex-row">
              <Text className="text-muted-foreground w-6 text-center">·</Text>
              <View className="flex-1">
                <Text className="text-muted-foreground text-xs">
                  Don't ask the user any questions before or while presenting the rating button or
                  card.
                </Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </>
  );
}