import * as React from 'react';
import { useReState } from '@raulpesilva/re-state';

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

const Foo: React.FC = () => {
  const [value, setValue] = useReState<number>('value', 0);

  return (
    <View style={styles.container}>
      <Button onPress={() => setValue(value + 1)} title=" + " />
      <Text>State value: {value}</Text>
      <Button onPress={() => setValue(value > 0 ? value - 1 : 0)} title=" - " />
    </View>
  );
};

const Bar: React.FC = () => {
  const [value] = useReState<number>('value', 0);

  return (
    <View style={styles.container}>
      <Text>State value: {value}</Text>
    </View>
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <Foo />
      <Bar />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

// components/User.tsx

import { useUser } from 'state/user';

const User = () => {
  const [user, setUser] = useUser();

  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.avatar} />
      <p>{user.email}</p>
      <button
        onClick={() =>
          setUser({
            _id: '123',
            name: 'Raul',
            email: '[email protected]',
            iat: 123,
            avatar: 'https://github.com/raulpesilva.png',
          })
        }
      >
        Set User
      </button>
    </div>
  );
};

// components/User.tsx

  import { useUser } from 'state/user'

  const User = () => {
    const [user, setUser] = useUser()

    return (
      <div>
        <h1>{user.name}</h1>
        <img src={user.avatar} />
        <p>{user.email}</p>
        <button onClick={() => setUser((prev) => {...prev, name: 'Raul P' })}>
          Change name
        </button>
      </div>
    )
  }

// components/User.tsx

  import { useUserSelect, useUserDispatch } from 'state/user/index'

  const User = () => {
    const user = useUserSelect()

    return (
      <div>
        <h1>{user.name}</h1>
        <img src={user.avatar} />
        <p>{user.email}</p>
        <button onClick={() => useUserDispatch((prev) => {...prev, name: 'Raul P' })}>
          Change name
        </button>
      </div>
    )
  }

// components/User.tsx

import { useUserSelect, changeName } from 'state/user/index';

const User = () => {
  const user = useUserSelect();

  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.avatar} />
      <p>{user.email}</p>
      <button onClick={() => changeName('Raul P')}>Change name</button>
    </div>
  );
};