import React from 'react';
import PropTypes from 'prop-types';
import {
    Container, Content, View, Text, Card, Left, Icon, Body, ListItem
} from 'native-base';
import { Actions } from 'react-native-router-flux';
import LottieView from 'lottie-react-native';
import { StatusBar } from 'expo-status-bar';
import Spacer from '../UI/Spacer';
import Loading from '../UI/Loading';
import TextI18n from '../UI/TextI18n';
import commonColor from '../../../constants/colors';

class Welcome extends React.Component {
    static propTypes = {
        member: PropTypes.shape({
            email: PropTypes.string,
        }),
        error: PropTypes.string,
        success: PropTypes.string,
        loading: PropTypes.bool.isRequired,
        onFormSubmit: PropTypes.func.isRequired,
    };

    static defaultProps = {
        error: null,
        success: null,
        member: {},
    };

    constructor(props) {
        super(props);
        this.state = {
            email: (props.member && props.member.email) ? props.member.email : '',
            password: '',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange = (name, val) => this.setState({ [name]: val });

    handleSubmit = () => {
        const { onFormSubmit } = this.props;

        return onFormSubmit(this.state)
            .then(() => setTimeout(() => Actions.tabbar(), 100))
            .catch(() => {});
    };

    render() {
        const { loading } = this.props;

        return (<Container style={{ backgroundColor: commonColor.backgroundColor }}>
            <StatusBar style="light"/>
            <Content padder style={{ flex: 1 }}>
                <Spacer size={60}/>
                <Text style={{
                    flex: 1,
                    fontSize: 55,
                    fontWeight: '400',
                    fontFamily: 'Montserrat_Bold',
                    color: 'white',
                    textAlign: 'center',
                }}>
                    {'Expo\nTicket App'}
                </Text>
                <LottieView
                    loop={true}
                    autoPlay
                    speed={1.5}
                    style={{ width: '100%' }}
                    source={require('../../../images/home')}
                />
                {!loading && <View>
                    <Card style={{ backgroundColor: commonColor.brandStyle }}>
                        <ListItem onPress={Actions.login} icon first>
                            <Left>
                                <Icon name="log-in" style={{ color: 'white' }}/>
                            </Left>
                            <Body style={{ borderBottomWidth: 0 }}>
                                <TextI18n style={{
                                    color: 'white',
                                    fontSize: 20
                                }}>
                                    login.connect
                                </TextI18n>
                            </Body>
                        </ListItem>
                        <ListItem onPress={Actions.signUp} icon>
                            <Left>
                                <Icon name="add-circle" style={{ color: 'white' }}/>
                            </Left>
                            <Body style={{ borderBottomWidth: 0 }}>
                                <TextI18n style={{
                                    color: 'white',
                                    fontSize: 20
                                }}>
                                    login.signUp
                                </TextI18n>
                            </Body>
                        </ListItem>
                    </Card>
                    <TextI18n
                        onPress={Actions.tabbar}
                        style={{
                            flex: 1,
                            fontSize: 13,
                            fontWeight: '400',
                            fontFamily: 'Montserrat',
                            paddingTop: 10,
                            color: 'white',
                            textAlign: 'center',
                            textDecorationLine: 'underline',
                        }}>
                        login.withoutAccount
                    </TextI18n>
                </View>}
                {loading && <Loading/>}
            </Content>
        </Container>);
    }
}

export default Welcome;