import React, { useState } from 'react';
import {View} from 'react-native'
import ETextInput from '@components/ETextInput';
import EFullButton, { ESmallButton } from '@components/EButton';
import EText, { ELabelText, ETitleText } from '@components/EText';
import ENavButtons from '@components/ENavButtons';

// implement logic here later.
export default function PasswordResetEmailInput(props:any) {
  const [email, setEmail] = useState<string>('');
  const emailre = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
  return (
    <>
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <ENavButtons back={true} />
        <View style={{flexDirection: 'column', marginTop: 0}}>
          <View style={{marginBottom: 24}}>
            <ETitleText style={{marginBottom:8}}>비밀번호 재설정하기</ETitleText>
            <EText>비밀번호를 다시 설정하려면 회원가입 때 사용하신 이메일 주소로 비밀번호 재설정 링크를 보내드립니다</EText>
          </View>
          <View style={{rowGap: 8}}>
            <ELabelText>이메일</ELabelText>
            <ETextInput placeholder='이메일 입력하기' value={email} setValue={setEmail} />
            <ESmallButton text={'재설정 이메일 보내기'} active={emailre.test(email)} />
          </View>
        </View>
        <EFullButton style={{marginTop:380}} text='다음' active={emailre.test(email)}/>
      </View>
    </>
  );
}