/**
 * Self-contained Expo Snack demo for react-native-body-parts-anatomy.
 *
 * Paste this file into https://snack.expo.dev (replacing App.tsx) — Snack
 * resolves every import below automatically, including the npm package itself
 * and its peer dependencies (react-native-svg, react-native-gesture-handler,
 * react-native-reanimated).
 */
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  BodySilhouette,
  FRAGMENT_BY_SLUG,
} from 'react-native-body-parts-anatomy';

export default function App() {
  const [selectedSlugs, setSelectedSlugs] = useState<string[]>([]);
  const [lastPressedSlug, setLastPressedSlug] = useState<string | null>(null);

  const toggleFragment = (slug: string) => {
    setLastPressedSlug(slug);
    setSelectedSlugs((current) =>
      current.includes(slug)
        ? current.filter((item) => item !== slug)
        : [...current, slug]
    );
  };

  const lastFragment = lastPressedSlug ? FRAGMENT_BY_SLUG[lastPressedSlug] : undefined;
  const labelParts = lastFragment
    ? [lastFragment.parentSlug, lastFragment.side, lastFragment.axis].filter(Boolean)
    : [];

  return (
    <GestureHandlerRootView style={styles.root}>
      <View style={styles.content}>
        <Text style={styles.title}>Tap the muscles</Text>
        <Text style={styles.subtitle}>
          {selectedSlugs.length === 0
            ? 'Nothing selected yet'
            : `${selectedSlugs.length} selected · last: ${labelParts.join(' · ')}`}
        </Text>
        <BodySilhouette
          gender="male"
          view="front"
          selectedSlugs={selectedSlugs}
          onFragmentPress={toggleFragment}
        />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 48,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    color: '#333333',
  },
  subtitle: {
    fontSize: 14,
    color: '#777777',
    marginTop: 4,
    marginBottom: 16,
  },
});