import * as React from 'react';
import { 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 Screen() {
  const [example, setExample] = React.useState(0);
  return (
    <>
      <ScrollView contentContainerClassName="flex-1">
        <View className="flex-1 items-center justify-center gap-1.5">
          <Button onPress={() => setExample((prev) => (prev === 2 ? 0 : prev + 1))}>
            <Text>Change Example</Text>
          </Button>
          <Text variant="footnote" className="text-muted-foreground">
            Showing example {example + 1}/3
          </Text>
        </View>
      </ScrollView>
      {example === 0 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          leftView={
            <>
              <ToolbarIcon icon={{ name: 'bookmark' }} />
              <ToolbarIcon icon={{ name: 'trash' }} />
            </>
          }
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
      {example === 1 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          leftView={<ToolbarIcon icon={{ name: 'bookmark' }} />}
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
      {example === 2 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
    </>
  );
}