import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  const [on, setOn] = useState(false);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>create + масив</Text>
      <Text style={styles.hint}>
        styles.btn → (on ? btnOn) → (pressed ? btnPressed)
      </Text>
      <Pressable
        onPress={() => setOn((v) => !v)}
        style={({ pressed }) => [
          styles.btn,
          on && styles.btnOn,
          pressed && styles.btnPressed,
        ]}
      >
        <Text style={styles.btnText}>{on ? 'Увімкнено' : 'Вимкнено'}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 24,
    justifyContent: 'center',
    gap: 12,
  },
  title: { fontSize: 20, fontWeight: '700', color: '#0f172a' },
  hint: { fontSize: 13, color: '#64748b', lineHeight: 18 },
  btn: {
    backgroundColor: '#94a3b8',
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
  },
  btnOn: { backgroundColor: '#2563EB' },
  btnPressed: { opacity: 0.85 },
  btnText: { color: '#fff', fontWeight: '700', fontSize: 16 },
});

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  const flat = StyleSheet.flatten([
    styles.titleBase,       // fontSize: 16, color: gray
    styles.titleEmphasis,   // fontSize: 22, fontWeight — перекриває size
    { color: '#2563EB' },   // color перемагає
  ]);

  return (
    <View style={styles.screen}>
      <Text style={flat}>Заголовок після flatten</Text>
      <View style={styles.panel}>
        <Text style={styles.label}>StyleSheet.flatten([...]) →</Text>
        <Text style={styles.code}>{JSON.stringify(flat, null, 2)}</Text>
      </View>
      <Text style={styles.hint}>
        fontSize: 22 (з emphasis), color: #2563EB (з останнього шару).
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 20, justifyContent: 'center', gap: 14 },
  titleBase: { fontSize: 16, color: '#64748b' },
  titleEmphasis: { fontSize: 22, fontWeight: '800' },
  panel: {
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    padding: 12,
  },
  label: { fontSize: 12, fontWeight: '600', color: '#64748b', marginBottom: 6 },
  code: { fontFamily: 'monospace', fontSize: 12, color: '#0f172a', lineHeight: 18 },
  hint: { fontSize: 13, color: '#64748b', lineHeight: 18 },
});

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text style={styles.h}>absoluteFill</Text>
      <View style={styles.card}>
        <Text style={styles.cardText}>Фон картки</Text>
        <View style={[StyleSheet.absoluteFill, styles.overlayA]}>
          <Text style={styles.overlayText}>Fill</Text>
        </View>
      </View>

      <Text style={styles.h}>absoluteFillObject</Text>
      <View style={styles.card}>
        <Text style={styles.cardText}>Фон картки</Text>
        <View
          style={{
            ...StyleSheet.absoluteFillObject,
            backgroundColor: 'rgba(37, 99, 235, 0.55)',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={styles.overlayText}>Object</Text>
        </View>
      </View>

      <Text style={styles.hint}>
        Обидва покривають батька. Object зручний, коли хочете один style-об’єкт
        зі спред-оператором.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 20, justifyContent: 'center', gap: 10 },
  h: { fontSize: 14, fontWeight: '700', color: '#0f172a' },
  card: {
    height: 100,
    borderRadius: 14,
    backgroundColor: '#dbeafe',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  cardText: { fontSize: 15, fontWeight: '600', color: '#1e3a8a' },
  overlayA: {
    backgroundColor: 'rgba(15, 23, 42, 0.55)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  overlayText: { color: '#fff', fontWeight: '800', fontSize: 16 },
  hint: { fontSize: 13, color: '#64748b', lineHeight: 18, marginTop: 4 },
});

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Розділювачі</Text>

      <View style={styles.list}>
        <Text style={styles.row}>Рядок A</Text>
        <View style={styles.hairline} />
        <Text style={styles.row}>Рядок B (після hairline)</Text>
        <View style={styles.thick} />
        <Text style={styles.row}>Рядок C (після border 1)</Text>
      </View>

      <Text style={styles.meta}>
        hairlineWidth = {String(StyleSheet.hairlineWidth)} (залежить від екрана)
      </Text>
      <Text style={styles.hint}>
        Верхня лінія — StyleSheet.hairlineWidth. Нижня — borderWidth: 1.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 24, justifyContent: 'center', gap: 14 },
  title: { fontSize: 20, fontWeight: '700', color: '#0f172a' },
  list: {
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    overflow: 'hidden',
  },
  row: { paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: '#0f172a' },
  hairline: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#94a3b8',
    marginHorizontal: 16,
  },
  thick: {
    height: 1,
    backgroundColor: '#94a3b8',
    marginHorizontal: 16,
  },
  meta: { fontSize: 13, fontWeight: '600', color: '#2563EB' },
  hint: { fontSize: 13, color: '#64748b', lineHeight: 18 },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  const [locked, setLocked] = useState(false);

  const titleFlat = StyleSheet.flatten([
    styles.titleBase,
    styles.titleStrong,
    { color: '#0f172a' },
  ]);

  return (
    <View style={styles.screen}>
      <Text style={titleFlat}>StyleSheet · all-in-one</Text>
      <Text style={styles.sub}>
        flatten title → fontSize {String((titleFlat as { fontSize?: number }).fontSize)}
      </Text>

      <View style={styles.card}>
        {/* absoluteFillObject: кутовий бейдж */}
        <View
          style={{
            ...StyleSheet.absoluteFillObject,
            top: 10,
            left: undefined,
            right: 10,
            bottom: undefined,
            width: 44,
            height: 22,
            borderRadius: 6,
            backgroundColor: '#2563EB',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={styles.badgeText}>PRO</Text>
        </View>

        <Text style={styles.name}>Карпати 2026</Text>
        <Text style={styles.desc}>create тримає картку; hairline — розділювач.</Text>

        <View style={styles.hairline} />

        <Text style={styles.meta}>12–18 червня · 6 днів</Text>

        {/* absoluteFill: затемнення поверх картки */}
        {locked && (
          <View style={[StyleSheet.absoluteFill, styles.lockOverlay]}>
            <Text style={styles.lockText}>Заблоковано</Text>
          </View>
        )}
      </View>

      <Pressable
        onPress={() => setLocked((v) => !v)}
        style={({ pressed }) => [
          styles.btn,
          locked && styles.btnOn,
          pressed && styles.btnPressed,
        ]}
      >
        <Text style={styles.btnText}>
          {locked ? 'Зняти оверлей (absoluteFill)' : 'Накрити absoluteFill'}
        </Text>
      </Pressable>

      <Text style={styles.hint}>
        create · flatten · absoluteFill · absoluteFillObject · hairlineWidth
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 20,
    justifyContent: 'center',
    gap: 12,
  },
  titleBase: { fontSize: 16 },
  titleStrong: { fontSize: 20, fontWeight: '800' },
  sub: { fontSize: 12, color: '#64748b', marginTop: -4 },
  card: {
    backgroundColor: '#fff',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    padding: 16,
    minHeight: 150,
    overflow: 'hidden',
  },
  badgeText: { color: '#fff', fontSize: 11, fontWeight: '800' },
  name: { fontSize: 18, fontWeight: '700', color: '#0f172a', marginTop: 4 },
  desc: { fontSize: 14, color: '#64748b', marginTop: 6, lineHeight: 20 },
  hairline: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#cbd5e1',
    marginVertical: 12,
  },
  meta: { fontSize: 13, color: '#64748b' },
  lockOverlay: {
    backgroundColor: 'rgba(15, 23, 42, 0.62)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  lockText: { color: '#fff', fontWeight: '800', fontSize: 16 },
  btn: {
    backgroundColor: '#94a3b8',
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
  },
  btnOn: { backgroundColor: '#2563EB' },
  btnPressed: { opacity: 0.85 },
  btnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
  hint: { fontSize: 12, color: '#94a3b8', textAlign: 'center' },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

const light = {
  background: '#F8FAFC',
  surface: '#FFFFFF',
  text: '#0F172A',
  textSecondary: '#64748B',
  primary: '#2563EB',
  primaryPressed: '#1D4ED8',
  border: '#E2E8F0',
  danger: '#DC2626',
  onPrimary: '#FFFFFF',
};

const dark = {
  background: '#000000',
  surface: '#1C1C1E',
  text: '#F5F5F7',
  textSecondary: '#A1A1AA',
  primary: '#3B82F6',
  primaryPressed: '#2563EB',
  border: '#3A3A3C',
  danger: '#F87171',
  onPrimary: '#FFFFFF',
};

export default function App() {
  const [mode, setMode] = useState<'light' | 'dark'>('light');
  const [busy, setBusy] = useState(false);
  const c = mode === 'dark' ? dark : light;

  const titleFlat = StyleSheet.flatten([
    styles.titleBase,
    styles.titleStrong,
    { color: c.text },
  ]);

  return (
    <View style={[styles.screen, { backgroundColor: c.background }]}>
      <View style={styles.row}>
        {(['light', 'dark'] as const).map((m) => {
          const active = mode === m;
          return (
            <Pressable
              key={m}
              onPress={() => setMode(m)}
              style={[
                styles.chip,
                {
                  backgroundColor: active ? c.primary : c.surface,
                  borderColor: c.border,
                },
              ]}
            >
              <Text
                style={{
                  color: active ? c.onPrimary : c.text,
                  fontWeight: '600',
                  fontSize: 13,
                }}
              >
                {m === 'light' ? 'Світла' : 'Темна'}
              </Text>
            </Pressable>
          );
        })}
      </View>

      <Text style={titleFlat}>Поїздка · токени</Text>
      <Text style={{ color: c.textSecondary, fontSize: 12 }}>
        flatten → fontSize {(titleFlat as { fontSize?: number }).fontSize}
      </Text>

      <View
        style={[
          styles.card,
          { backgroundColor: c.surface, borderColor: c.border },
        ]}
      >
        {/* absoluteFillObject — кутовий бейдж */}
        <View
          style={{
            ...StyleSheet.absoluteFillObject,
            top: 10,
            left: undefined,
            right: 10,
            bottom: undefined,
            width: 40,
            height: 22,
            borderRadius: 6,
            backgroundColor: c.primary,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: c.onPrimary, fontSize: 10, fontWeight: '800' }}>
            NEW
          </Text>
        </View>

        <Text style={[styles.cardTitle, { color: c.text }]}>Київ — Карпати</Text>
        <Text style={{ color: c.textSecondary, marginTop: 4, lineHeight: 18 }}>
          surface + text + textSecondary. Hex лише в таблицях light/dark.
        </Text>

        {/* hairlineWidth */}
        <View
          style={{
            height: StyleSheet.hairlineWidth,
            backgroundColor: c.border,
            marginVertical: 12,
          }}
        />

        <Text style={{ color: c.danger, fontSize: 13, fontWeight: '600' }}>
          danger · «Скасувати бронювання»
        </Text>

        {/* absoluteFill — оверлей стану */}
        {busy && (
          <View style={[StyleSheet.absoluteFill, styles.overlay]}>
            <Text style={{ color: c.onPrimary, fontWeight: '800' }}>
              Видалення…
            </Text>
          </View>
        )}
      </View>

      <Pressable
        onPress={() => setBusy((v) => !v)}
        style={({ pressed }) => [
          styles.btn,
          { backgroundColor: pressed ? c.primaryPressed : c.primary },
        ]}
      >
        <Text style={{ color: c.onPrimary, fontWeight: '700' }}>
          {busy ? 'Сховати absoluteFill' : 'Показати absoluteFill'}
        </Text>
      </Pressable>

      <Text style={{ color: c.textSecondary, fontSize: 12, lineHeight: 17 }}>
        create · flatten · hairline · absoluteFill · absoluteFillObject ·
        background/surface/text/primary/border/danger/onPrimary
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 18, justifyContent: 'center', gap: 10 },
  row: { flexDirection: 'row', gap: 8 },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
    borderWidth: 1,
  },
  titleBase: { fontSize: 16 },
  titleStrong: { fontSize: 20, fontWeight: '800' },
  card: {
    borderRadius: 16,
    borderWidth: 1,
    padding: 16,
    minHeight: 150,
    overflow: 'hidden',
  },
  cardTitle: { fontSize: 17, fontWeight: '700', marginTop: 4 },
  overlay: {
    backgroundColor: 'rgba(15, 23, 42, 0.65)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
  },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={[styles.screen, { backgroundColor: isDark ? '#000' : '#F8FAFC' }]}>
      <Text style={[styles.label, { color: isDark ? '#a1a1aa' : '#64748b' }]}>
        useColorScheme()
      </Text>
      <Text style={[styles.value, { color: isDark ? '#f5f5f7' : '#0f172a' }]}>
        {scheme ?? 'null'}
      </Text>
      <Text style={[styles.hint, { color: isDark ? '#a1a1aa' : '#64748b' }]}>
        Змініть тему ОС (або тему сайту в браузері) — значення може оновитись.
        У Expo Go перемикайте appearance симулятора / телефону.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 24, justifyContent: 'center', gap: 8 },
  label: { fontSize: 13, fontWeight: '600', textTransform: 'uppercase' },
  value: { fontSize: 32, fontWeight: '800' },
  hint: { fontSize: 13, lineHeight: 18, marginTop: 8 },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

const light = {
  background: '#F8FAFC',
  surface: '#FFFFFF',
  text: '#0F172A',
  textSecondary: '#64748B',
  primary: '#2563EB',
  border: '#E2E8F0',
  onPrimary: '#FFFFFF',
};

const dark = {
  background: '#000000',
  surface: '#1C1C1E',
  text: '#F5F5F7',
  textSecondary: '#A1A1AA',
  primary: '#3B82F6',
  border: '#3A3A3C',
  onPrimary: '#FFFFFF',
};

export default function App() {
  const [mode, setMode] = useState<'light' | 'dark'>('light');
  const c = mode === 'dark' ? dark : light;

  return (
    <View style={[styles.screen, { backgroundColor: c.background }]}>
      <View style={styles.row}>
        <Pressable
          onPress={() => setMode('light')}
          style={[
            styles.chip,
            {
              backgroundColor: mode === 'light' ? c.primary : c.surface,
              borderColor: c.border,
            },
          ]}
        >
          <Text
            style={{
              color: mode === 'light' ? c.onPrimary : c.text,
              fontWeight: '600',
            }}
          >
            Світла
          </Text>
        </Pressable>
        <Pressable
          onPress={() => setMode('dark')}
          style={[
            styles.chip,
            {
              backgroundColor: mode === 'dark' ? c.primary : c.surface,
              borderColor: c.border,
            },
          ]}
        >
          <Text
            style={{
              color: mode === 'dark' ? c.onPrimary : c.text,
              fontWeight: '600',
            }}
          >
            Темна
          </Text>
        </Pressable>
      </View>

      <View
        style={[
          styles.card,
          { backgroundColor: c.surface, borderColor: c.border },
        ]}
      >
        <Text style={[styles.cardTitle, { color: c.text }]}>Карпати 2026</Text>
        <Text style={{ color: c.textSecondary, marginTop: 6, lineHeight: 20 }}>
          Кольори з палітри «{mode}». Той самий JSX — інші значення токенів.
        </Text>
        <View style={[styles.badge, { backgroundColor: c.primary }]}>
          <Text style={{ color: c.onPrimary, fontWeight: '700', fontSize: 12 }}>
            primary
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 20, gap: 16, justifyContent: 'center' },
  row: { flexDirection: 'row', gap: 8 },
  chip: {
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 10,
    borderWidth: 1,
  },
  card: {
    borderRadius: 16,
    borderWidth: 1,
    padding: 16,
  },
  cardTitle: { fontSize: 18, fontWeight: '700' },
  badge: {
    alignSelf: 'flex-start',
    marginTop: 12,
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 8,
  },
});

import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useState,
  type ReactNode,
} from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  useColorScheme,
} from 'react-native';

// ——— 1. Палітри (у Nomad: colors.ts) ———
const lightColors = {
  background: '#F8FAFC',
  surface: '#FFFFFF',
  text: '#0F172A',
  textSecondary: '#64748B',
  primary: '#2563EB',
  border: '#E2E8F0',
  onPrimary: '#FFFFFF',
};

const darkColors = {
  background: '#000000',
  surface: '#1C1C1E',
  text: '#F5F5F7',
  textSecondary: '#A1A1AA',
  primary: '#3B82F6',
  border: '#3A3A3C',
  onPrimary: '#FFFFFF',
};

type Colors = typeof lightColors;
type Preference = 'system' | 'light' | 'dark';
type Scheme = 'light' | 'dark';

function colorsForScheme(scheme: Scheme): Colors {
  return scheme === 'dark' ? darkColors : lightColors;
}

function resolveScheme(
  preference: Preference,
  system: string | null | undefined,
): Scheme {
  if (preference === 'light' || preference === 'dark') return preference;
  return system === 'dark' ? 'dark' : 'light';
}

// ——— 2. Context + Provider + useTheme (у Nomad: ThemeProvider.tsx) ———
type ThemeValue = {
  scheme: Scheme;
  preference: Preference;
  setPreference: (p: Preference) => void;
  colors: Colors;
};

const ThemeContext = createContext<ThemeValue | null>(null);

function ThemeProvider({ children }: { children: ReactNode }) {
  const system = useColorScheme();
  const [preference, setPreferenceState] = useState<Preference>('system');

  const setPreference = useCallback((p: Preference) => {
    setPreferenceState(p);
  }, []);

  const scheme = resolveScheme(preference, system);
  const colors = useMemo(() => colorsForScheme(scheme), [scheme]);

  const value = useMemo(
    () => ({ scheme, preference, setPreference, colors }),
    [scheme, preference, setPreference, colors],
  );

  return (
    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
  );
}

function useTheme(): ThemeValue {
  const ctx = useContext(ThemeContext);
  if (!ctx) {
    throw new Error('useTheme() лише всередині <ThemeProvider>');
  }
  return ctx;
}

// ——— 3. UI читає тему через хук (у Nomad: Screen, TripCard, …) ———
function HomeScreen() {
  const { colors, scheme, preference, setPreference } = useTheme();

  return (
    <View style={[styles.screen, { backgroundColor: colors.background }]}>
      <Text style={[styles.title, { color: colors.text }]}>Мій ThemeProvider</Text>
      <Text style={{ color: colors.textSecondary, marginBottom: 12 }}>
        preference: {preference} · scheme: {scheme}
      </Text>

      <View style={styles.row}>
        {(['system', 'light', 'dark'] as Preference[]).map((p) => {
          const active = preference === p;
          return (
            <Pressable
              key={p}
              onPress={() => setPreference(p)}
              style={[
                styles.chip,
                {
                  backgroundColor: active ? colors.primary : colors.surface,
                  borderColor: colors.border,
                },
              ]}
            >
              <Text
                style={{
                  color: active ? colors.onPrimary : colors.text,
                  fontWeight: '600',
                  fontSize: 13,
                }}
              >
                {p === 'system' ? 'Система' : p === 'light' ? 'Світла' : 'Темна'}
              </Text>
            </Pressable>
          );
        })}
      </View>

      <View
        style={[
          styles.card,
          { backgroundColor: colors.surface, borderColor: colors.border },
        ]}
      >
        <Text style={[styles.cardTitle, { color: colors.text }]}>
          Картка через useTheme()
        </Text>
        <Text style={{ color: colors.textSecondary, marginTop: 6, lineHeight: 20 }}>
          Цей екран не знає hex. Він просить colors у Context, який наповнив
          ThemeProvider вище по дереву.
        </Text>
      </View>
    </View>
  );
}

// ——— 4. Корінь: ОБОВʼЯЗКОВО обгорнути Provider ———
export default function App() {
  return (
    <ThemeProvider>
      <HomeScreen />
    </ThemeProvider>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 20, justifyContent: 'center', gap: 8 },
  title: { fontSize: 22, fontWeight: '800' },
  row: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 8 },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 10,
    borderWidth: 1,
  },
  card: { borderRadius: 16, borderWidth: 1, padding: 16, marginTop: 8 },
  cardTitle: { fontSize: 17, fontWeight: '700' },
});