/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */ 
import React, { Component } from 'react';
import { View } from 'react-native';

import { Container, Content, Thumbnail, Text, Button, Form, Item, Label, Input, ListItem } from 'native-base';
import HeaderViewContainer from '../../../../components/star/header/headerViewContainer';
import formData from '../../../../Database/star';
import PickerComponent from '../../../../components/star/picker/picker';
import styles from './styles';
const EditProfileView = (props: { goBackTo: () => void; selected?: string; onValueChange: ($event: any) => void; }) => {
    const { goBackTo } = props
    return (
        <Container>
            <HeaderViewContainer
                leftIcon={'close'}
                rightIcon={'checkmark'}
                headerTitle={'Edit profile'}
                leftPress={goBackTo}
                rightPress={goBackTo}
            />
            <Content>
                <View style={styles.centerItem}>
                    <View style={styles.imagePadding}>
                        <Thumbnail circular large source={require('../../../../assets/star/chat4.jpg')}
                            style={styles.thumbstyle} />
                    </View>
                    <Button transparent style={styles.button}><Text uppercase={false} style={styles.textProfile}>Change Profile Photo</Text></Button>
                </View>
                <Form>
                    {formData.editProfileForm.map((inputs, index) => {
                        return (
                            <View key={index}>
                                {inputs.label &&
                                    <Item stackedLabel>
                                        <Label>{inputs.label}</Label>
                                        <Input placeholder={inputs.placeholder} />
                                    </Item>
                                }
                                {inputs.header &&
                                    <Item>
                                        <Button full transparent><Text style={styles.buttonFull}>{inputs.header}</Text></Button>
                                    </Item>
                                }
                                {inputs.Private &&
                                    <ListItem itemHeader>
                                        <Text>{inputs.Private}</Text>
                                    </ListItem>
                                }
                                {inputs.picker &&
                                    <View style={{ marginLeft: 15 }}>
                                        <Label style={styles.label}>{inputs.picker}</Label>
                                        <Item picker>
                                            <PickerComponent
                                                jsonList={formData.formCategory}
                                                selectedValue={props.selected}
                                                onSelectChange={($event: any) => props.onValueChange($event)}
                                            />
                                        </Item>
                                    </View>

                                }
                            </View>
                        )
                    })
                    }
                </Form>
            </Content>
        </Container>
    );
}
export default EditProfileView;