import { ViewStyle, TextStyle, Dimensions } from 'react-native';
//TODO
import { spacing, color, typography } from '../../theme';
const { height } = Dimensions.get('screen');

export const ICON_LOGO_SIZE = 160;

export const loginFormStyles = {
  content: {
    justifyContent: 'flex-end',
  } as ViewStyle,
  headerContainer: {
    height: height / 3,
  } as ViewStyle,
  logoContainer: {
    alignItems: 'flex-start',
    marginLeft: -15,
    paddingTop: spacing[8],
  } as ViewStyle,
  feedbackBar: {
    left: -spacing[6],
    right: -spacing[6],
    top: height / 4.5,
    paddingVertical: spacing[3],
    paddingHorizontal: spacing[4],
    position: 'absolute',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  } as ViewStyle,
  feedbackBarError: {
    justifyContent: 'space-between',
  } as ViewStyle,
  formContainer: {
    width: '100%',
    flexDirection: 'column',
  } as ViewStyle,
  fieldLabel: {
    marginBottom: spacing[2],
    color: color.dim,
  } as TextStyle,
  errorLabel: {
    color: color.error,
  } as TextStyle,
  buttonContainer: {
    marginTop: spacing[4],
    alignItems: 'flex-start',
  } as ViewStyle,
  buttonText: {
    marginHorizontal: spacing[3],
    fontSize: typography.fontSize[4],
    fontWeight: typography.fontWeight.semiBold,
  } as ViewStyle,
};

export const iconColors = {
  active: color.text,
  error: color.palette.wildSand,
  header: color.palette.gray,
  noActive: color.palette.gray,
  warning: color.palette.ebony,
};

export const feedbackBarIconSize = typography.fontSize[4];
export const passwordIconSize = typography.fontSize[6];
