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

interface IStylesProps {
  editable: boolean;
  disabled: boolean;
  focus: boolean;
  withIcon: boolean;
  hasError?: boolean;
  styles: CSSObject;
}

export const InputBase = styled.TextInput`
  paddingVertical: 12px;
  padding-left: 15px;
  padding-right: ${({withIcon }: IStylesProps) => withIcon ? '45px' : '15px'};
  border-width: 1px;
  borderColor:${({ editable, disabled, hasError }: IStylesProps) =>
    disabled === true ? theme.neutral300 : editable === false ? theme.transparent : (hasError ? theme.secondary400 : theme.neutral400)};
  flex: 1;
  width: 100%;
  height: 48px;
  borderRadius: 8px;
  color: ${theme.neutral700};
  backgroundColor: ${({ disabled }: IStylesProps) => disabled?  theme.neutral300 : theme.neutral100};
  ${({styles}) => styles};
  &:focus{
    border-color: ${theme.neutral700};
  }
  &::placeholder{
    color: ${theme.neutral500};
    font-weight: 400;
  }
`;