import * as React from 'react';
import { Pressable, ScrollView, View } from 'react-native';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import Animated, { FadeIn, ZoomOut } from 'react-native-reanimated';

import { useColorScheme } from '@/lib/useColorScheme';
import { Button } from '@/components/nativewindui/Button';
import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import { LargeTitleHeader } from '@/components/nativewindui/LargeTitleHeader';
import type { LargeTitleSearchBarMethods } from '@/components/nativewindui/LargeTitleHeader/types';

export default function Screen() {
  const { colors } = useColorScheme();
  const searchBarRef = React.useRef<LargeTitleSearchBarMethods>(null);

  function onTryNewSearch() {
    searchBarRef.current?.focus();
  }
  return (
    <>
      <LargeTitleHeader
        title="Large title"
        iosBackButtonTitle="Back"
        searchBar={{
          ref: searchBarRef,
          onChangeText: (text) => {
            console.log(text);
          },
          materialRightView() {
            return (
              <Animated.View entering={FadeIn} exiting={ZoomOut}>
                <Button variant="plain" size="icon">
                  <Icon name="gearshape" color={colors.foreground} />
                </Button>
              </Animated.View>
            );
          },
          content: (
            <KeyboardAvoidingView
              behavior="padding"
              className="ios:bg-background flex-1 items-center justify-center gap-0.5 p-4">
              <Text variant="title1" className="font-bold">
                Type anything
              </Text>
              <View className="flex-row items-center">
                <Text variant="callout" className="text-muted-foreground text-center">
                  This is a demo of the LargeTitleHeader component.
                </Text>
              </View>
            </KeyboardAvoidingView>
          ),
        }}
      />
      <ScrollView contentContainerClassName="flex-1 items-center justify-center">
        <Text variant="title1" className="font-bold">
          No Results
        </Text>
        <View className="flex-row flex-wrap items-center">
          <Text variant="callout" className="text-muted-foreground text-center">
            There were no results.{' '}
          </Text>
          <Pressable onPress={onTryNewSearch}>
            <Text variant="callout" className="text-muted-foreground text-center">
              Try a new search.
            </Text>
          </Pressable>
        </View>
      </ScrollView>
    </>
  );
}