import styled from "styled-components/native";
import { theme } from "data/dataMx";
import { CSSObject } from "styled-components";
interface IStylesProps {
  isFirst?: boolean;
  disabled?: boolean;
  width?: string;
  height?: string;
  fontFamily?: string;
  placeholderColor?: string;
  hasError?: boolean;
  readOnly?: boolean;
  styles?: CSSObject;
}

export const Select = styled.TouchableOpacity`
  padding: 14px 16px;
  ${({ styles }) => styles};
  border-width: ${({ disabled }: IStylesProps) => (disabled ? "0px" : "1px")};
  border-color: ${({ disabled, hasError, readOnly }: IStylesProps) =>
    disabled === true
      ? theme.neutral300
      : hasError
      ? theme.secondary400
      : readOnly
      ? theme.transparent
      : theme.neutral400};
  border-radius: 8px;
  width: ${({ width }: IStylesProps) => width};
  height: ${({ height }: IStylesProps) => height};
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  background-color: ${({ disabled, readOnly }: IStylesProps) =>
    disabled
      ? theme.neutral300
      : readOnly
      ? theme.transparent
      : theme.neutral100};
  `

export const SelectText = styled.Text`
  ${({ styles }) => styles};
  font-size: 16px;
  color: ${({ disabled, placeholderColor }: IStylesProps) =>
    disabled
      ? theme.neutral400
      : placeholderColor
      ? theme.neutral500
      : theme.neutral700};
  font-family: ${({ fontFamily }: IStylesProps) => fontFamily};
`;

export const Modal = styled.Modal``;

export const ModalTouchable = styled.TouchableOpacity`
  flex: 1;
  margin-left: 0;
  justify-content: flex-end;
  background-color: rgba(0,0,0,0.4);
`;

export const HeaderOptions = styled.View`
background-color: ${theme.neutral300};
height:50px;
align-items: center;
justify-content: center;
font-size: 16px;
`

export const HeaderText = styled.Text``

export const ModalContent = styled.View`
  background-color: ${theme.neutral100};
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
  margin-top: 50px;
  width: 100%;
`;

export const ModalScroll = styled.ScrollView`
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
`;

export const Option = styled.TouchableHighlight`
  height:50px;
  align-items: center;
  justify-content: center;
`;

export const ModalArea = styled.SafeAreaView`
`;

export const OptionText = styled.Text`
  color: ${theme.neutral600};
  font-size: 16px;
`;
