import RNPickerSelect from 'react-native-picker-select';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { Picker } from '@react-native-community/picker';
import styled from 'styled-components/native';
import { Pressable } from '../../Pressable';
import { RSValue, RFValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

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

export const SelectContainer = styled(Pressable)<any>`
   overflow: hidden;
   margin-bottom: 5px;
   padding-left: 10px;
   position: relative;
   height: 45px;
   justify-content: center;
   align-items: center;
   border-bottom-color: #000;
   border-bottom-width: 1px;
   flex-direction: row;
   ${(props) => props.rounded && 'border-radius: 4px;'}
   ${(props) => props.error && `border-bottom-color: ${props.theme.danger ?? 'crimson'};`}
`;

export const SelectItem = styled(TextNative)<any>``;

export const SelectItemPlaceHolder = styled(TextNative)<any>`
   color: #bbb;
`;

export const FontAwesomeIconItem = styled(FontAwesomeIcon).attrs({
   size: RFValue(15.5),
})`
   width: ${RSValue(100)}px;
   align-self: center;
   margin-right: ${RSValue(15)}px;
`;

export const SelectStyle = styled(RNPickerSelect).attrs({
   textStyle: {
      fontSize: 90,
   },
})``;
