import styled from 'styled-components/native';
import { CSSObject } from "styled-components";
import { theme } from 'data/dataMx';

interface IStylesProps {
  disabled: boolean;
  readOnly?: boolean;
  hasError?: boolean;
  actualValue?: boolean;
  backGround?: string;
  minWidth?: string;
  viewIcon?: boolean;
  styles?: CSSObject;
}

export const Select = styled.View`
  width: 100%;
  position: relative;
`;

export const ContainerInput = styled.TouchableOpacity`
  position: relative;
  width: 100%;
  min-width: ${({ minWidth }: IStylesProps) => minWidth};
`;

export const ContainerIconFlag = styled.View`
  position: absolute;
  left: 10px;
  top: 12px;
`;

export const Value = styled.TextInput`
  ${({ styles }) => styles}
  height: 48px;
  border: ${({ disabled, readOnly, hasError }: IStylesProps) => disabled ? 'none' : `1px solid ${
    disabled ? theme.neutral300 : readOnly ? theme.transparent : (hasError ? theme.secondary400 : theme.neutral400)}`};
  borderRadius: 8px;
  display: flex;
  alignItems: center;
  padding: 14px;
  backgroundColor: ${theme.neutral100};
  width: 100%;
  paddingLeft: ${({ actualValue, viewIcon }: IStylesProps) => actualValue && viewIcon ? '40px' : '14px'};
`;

export const ContainerIcon = styled.View`
  position: absolute;
  right: 15px;
  top: 19px;
`;

export const Option = styled.ScrollView`
  backgroundColor: ${theme.neutral100};
  padding: 16px;
  minWidth: 200px;
  position: absolute;
  margin: 0;
  top:56px;
  left: 0;
  right: 0px;
  paddingRight: 0px;
  maxHeight: 200px;
  border: ${`1px solid ${theme.neutral400}`};
  borderRadius: 8px;
  elevation: 5;

  svg {
    min-width:24px
  }

`;

export const ItemContainer = styled.TouchableOpacity`
  display: flex;
  alignItems: center;
  height: 40px;
  flexDirection: row;
  backgroundColor: ${({ backGround }: IStylesProps) => backGround};
`;

export const ContainerText = styled.View`
  marginLeft: 8px;
`;


export const IconContainer = styled.View`
min-width:24px;
`