import { Stack } from 'expo-router';
import * as React from 'react';
import { Platform, ScrollView, View } from 'react-native';

import { Button } from '../~/components/nativewindui/Button';
import { Text } from '~/components/nativewindui/Text';
import { Toolbar, ToolbarCTA, ToolbarIcon } from '~/components/nativewindui/Toolbar';

export default function ToolbarScreen() {
  const [example, setExample] = React.useState(0);
  return (
    <>
      <Stack.Screen
        options={Platform.select({
          ios: {
            title: 'Toolbar',
            headerTransparent: true,
            headerBlurEffect: 'regular',
          },
          default: {
            title: 'Toolbar',
          },
        })}
      />
      <ScrollView contentContainerClassName="flex-1">
        <View className="flex-1 items-center justify-center">
          <Button onPress={() => setExample((prev) => (prev === 2 ? 0 : prev + 1))}>
            <Text>Change Example</Text>
          </Button>
        </View>
        <View className="flex-1 items-center justify-center">
          <Text>Example {example}</Text>
        </View>
      </ScrollView>
      {example === 0 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          leftView={
            <>
              <ToolbarIcon icon={{ name: 'bookmark-outline' }} />
              <ToolbarIcon icon={{ name: 'trash-can-outline' }} />
            </>
          }
          rightView={<ToolbarCTA icon={{ name: 'pencil-box-outline' }} />}
        />
      )}
      {example === 1 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          leftView={<ToolbarIcon icon={{ name: 'bookmark-outline' }} />}
          rightView={<ToolbarCTA icon={{ name: 'pencil-box-outline' }} />}
        />
      )}
      {example === 2 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          rightView={<ToolbarCTA icon={{ name: 'pencil-box-outline' }} />}
        />
      )}
    </>
  );
}