import React from 'react'
import styled from 'styled-components/native'

export interface ViewInterface {
    title?: string,
    subTitle?: string,
    backgroundColor?: string,
    padding?: string,
    borderRadius?: string,
    border?: string,
    inputBackgroundColor?: string,
    inputBorderRadius?: string,
    inputBorder?: string,
    inputPadding?: string,
    placeHolderColor?: string,
    buttonBackground?: string,
    buttonFontColor?: string,
    buttonBorderRadius?: string,
    buttonPadding?: string,
    buttonMargin?: string,
    inputMargin?: string,
    onLogin?: any,
    loginButtonText?: string,
    loginButtonBackground?: string,
    loginButtonBorder?: string,
    buttonBorder?: string,
    registerButtonText?: string,
    registerButtonBackground?: string,
    registerButtonBorderColor?: string,
    loginButtonBorderColor?: string,
    onRegister?: any,
    onForgot?: any,
    forgotButtonText?: string
}

export const Wrapper = styled.View<ViewInterface>`
    background-color: ${ props => props.backgroundColor };
    padding: ${ props => props.padding };
    border: ${ props => props.border };
    border-radius: ${ props => props.borderRadius };
`

export const InputWrapper = styled.View<ViewInterface>`
    background-color: ${ props => props.inputBackgroundColor };
    border-radius: ${ props => props.inputBorderRadius };
    padding: ${ props => props.inputPadding };
    margin: ${ props => props.inputMargin }
`

export const StyledInput = styled.TextInput`
    min-height: 30px;
`

export const ButtonContainer = styled.TouchableOpacity<ViewInterface>`
    elevation: 8;
    border-radius: ${ props => props.buttonBorderRadius };
    padding: ${ props => props.buttonPadding };
    margin: ${ props => props.buttonMargin };
    background-color: ${ props => props.backgroundColor }
    border: 1px solid;
    border-color: ${ props => props.registerButtonBorderColor };;
`;

export const ButtonText = styled.Text`
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    align-self: center;
`;

export const Title = styled.Text`
    font-size: 26px;
    color: white;
    margin-bottom: 12px;
`

export const SubTitle = styled.Text`
    font-size: 17px;
    color: white;
    margin-bottom: 20px;
`

const LoginForm = (props: ViewInterface) => {
    
    let title, sub_title
    if (props.title) {
        title = <Title>{props.title}</Title>
    }
    if (props.subTitle) {
        sub_title = <SubTitle>{ props.subTitle }</SubTitle>
    }
    return (
        <Wrapper 
            backgroundColor={props.backgroundColor} 
            padding={ props.padding }
            borderRadius={ props.borderRadius || '0px' }
            border={ props.border }>
            { title }
            { sub_title }
            <InputWrapper
                inputBackgroundColor={props.inputBackgroundColor} 
                inputPadding={ props.inputPadding }
                inputBorderRadius={ props.inputBorderRadius || '0px' }
                inputMargin={ props.inputMargin }
                inputBorder={ props.inputBorder }>
                <StyledInput
                    placeholder="Email"
                    placeholderTextColor="gray">
                </StyledInput>
            </InputWrapper>
            <InputWrapper
                inputBackgroundColor={props.inputBackgroundColor} 
                inputPadding={ props.inputPadding }
                inputBorderRadius={ props.inputBorderRadius || '0px' }
                inputMargin={ props.inputMargin }
                inputBorder={ props.inputBorder }>
                <StyledInput
                    placeholder="Password"
                    secureTextEntry={true}
                    placeholderTextColor="gray">
                </StyledInput>
            </InputWrapper>
            <Title></Title>
            <ButtonContainer
                buttonBorderRadius={ props.buttonBorderRadius }
                buttonPadding={props.buttonPadding }
                buttonMargin={props.buttonMargin }
                registerButtonBorderColor={props.registerButtonBorderColor}
                backgroundColor={ props.loginButtonBackground || 'transparent'}
                onPress={ props.onLogin }>
                    <ButtonText>{ props.loginButtonText }</ButtonText>
            </ButtonContainer>
            <ButtonContainer
                buttonBorderRadius={ props.buttonBorderRadius }
                buttonPadding={props.buttonPadding }
                buttonMargin={props.buttonMargin }
                registerButtonBorderColor={props.registerButtonBorderColor}
                backgroundColor={ props.registerButtonBackground || 'transparent'}
                onPress={ props.onRegister }>
                    <ButtonText>{ props.registerButtonText }</ButtonText>
            </ButtonContainer>
            <ButtonContainer
                buttonBorderRadius={ props.buttonBorderRadius }
                buttonPadding={ '0' }
                buttonMargin={ '9px 0'}
                registerButtonBorderColor={'transparent'}
                backgroundColor={ props.registerButtonBackground || 'transparent'}
                onPress={ props.onForgot }>
                    <ButtonText>{ props.forgotButtonText }</ButtonText>
            </ButtonContainer>

        </Wrapper>
    );
};

export default LoginForm;