import styled from 'styled-components/native';
import { RFValue, RSValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const Container = styled.View<any>``;

export const TitleText = styled(TextNative).attrs({ bold: true })<any>`
   font-size: ${RFValue(14)}px;
   color: #535353;
`;

export const InputContainer = styled.View<any>`
    overflow: hidden;
    background-color: transparent;
    margin-top: 1px;
    margin-bottom: 6px;
    flex-direction: row;
    align-items: center;
    border-bottom-width: 1px;
    border-color: #a5a5a5;
    ${(props) => props.focus && 'border-color: black; border-bottom-width: 2px; margin-bottom: 5px;'}
    ${(props) => props.focus && 'border-color: black; border-bottom-width: 2px; margin-bottom: 5px;'}
    ${(props) => props.rounded && 'border-radius: 4px;'}
    ${(props) => props.error && `border-color: ${props.theme.red || 'crimson'};`}
`;

export const InputStyle = styled.TextInput.attrs({
   placeholderTextColor: '#999',
})<any>`
   color: black;
   padding: ${RSValue(5)}px ${RSValue(0)}px;
   font-size: ${RFValue(16)}px;
   border: none;
   flex: 1;
   max-height: 100px;
   ${(props) => props.textCenter && 'text-align: center;'}
   ${(props) => props.textRight && 'text-align: right;'}
   ${(props) => !!props.multiline && 'text-align-vertical: top;'}
   ${(props) => props.prefix && 'padding-left: 0px;'}
`;

export const Prefix = styled(TextNative).attrs({})`
   color: #999;
   font-size: ${RFValue(16.5)}px;
   padding: 0px 10px;
`;

export const Suffix = styled(TextNative).attrs({})`
   color: #999;
   font-size: ${RFValue(16.5)}px;
   padding: 0px 10px;
`;

export const ViewPassword = styled.TouchableOpacity`
   position: absolute;
   flex: 1;
   justify-content: center;
   padding: 0px 15px;
   top: 0;
   bottom: 0;
   right: 0;
`;

export const TextError = styled(TextNative).attrs({ bold: true })<any>`
   color: ${(props) => props.theme.red || 'crimson'};
   font-size: ${RFValue(14)}px;
`;
