import React, { FC, useState } from 'react';
import { View } from 'react-native';
import { NavigationProp } from '@react-navigation/native';

import { PageWrapper, Header, Button, BigText, CheckBox, Input } from '../../../components';
import { NAVIGATION_PAGES } from '../../../types';

type Props = {
  navigation: NavigationProp<any>;
};

const JoinUsScreen: FC<Props> = ({ navigation }) => {
  const [agreed, setAgreed] = useState(false);

  return (
    <PageWrapper>
      <Header label={'Sign Up'} />
      <View style={{ gap: 15 }}>
        <BigText>Join us. It's free!</BigText>
        <Input onChange={() => {}} placeholder={'Text'} header={'Username'} />
        <Input
          onChange={() => {}}
          placeholder={'Email'}
          inputMode={'email'}
          header={'Email address'}
        />
        <Input onChange={() => {}} placeholder={'Text'} isPrivate={true} header={'Password'} />
        <Input
          onChange={() => {}}
          placeholder={'Text'}
          isPrivate={true}
          header={'Confirm password'}
        />
        <CheckBox
          label={'I accept NM Terms & Conditions'}
          onChange={(b) => setAgreed(b)}
          value={agreed}
        />
      </View>
      <View style={{ marginTop: '15%' }}>
        <Button onPress={() => navigation.navigate(NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA)}>
          Continue
        </Button>
      </View>
    </PageWrapper>
  );
};

export default JoinUsScreen;