import React from 'react';
import { View, ScrollView } from 'react-native';
import { AvatarPicker, BigText, Button, Header, Input, PageWrapper } from '../../../components';
import { InputDatePicker } from '../../../components/Calendar/InputDatePicker';
import { ModalFlatList } from '../../../components/FlatList/modal-flatlist';

//TODO: connect with API + simple refactor

const EditAccount = () => {
  return (
    <PageWrapper>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ gap: 10 }}>
          <Header label={'Sign Up'} />
          <BigText>Edit account data</BigText>
          <View style={{ display: 'flex', alignItems: 'center' }}>
            <AvatarPicker />
          </View>
          <Input placeholder={'Text'} onChange={() => {}} header={'First name'} />
          <Input placeholder={'Text'} onChange={() => {}} header={'Last name'} />
          <InputDatePicker selectedDate={(date) => console.log(date)} />
          <ModalFlatList
            headerTitle={'Region of origin'}
            selectedObject={(data) => console.log(data)}
          />
          <ModalFlatList
            headerTitle={'Second region'}
            selectedObject={(data) => console.log(data)}
          />
          <View style={{ marginTop: 10 }}>
            <Button>Sign up</Button>
          </View>
        </View>
      </ScrollView>
    </PageWrapper>
  );
};

export default EditAccount;