import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: width * 0.05,
  },

  boardingSection: {
    flex: 1.2,
    justifyContent: 'space-between',
  },
  boardingImage: {
    width: width * 0.7,
    height: width * 0.7,
    alignSelf: 'center',
  },
  boardingContentSection: {
    paddingBottom: width * 0.04,
  },
  boardingTitle: {
    fontFamily: FONTS.poppins[700],
    fontSize: RFValue(21),
    color: Colors.BLACK,
  },
  boardingSubTitle: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(12),
    color: Colors.TEXT,
    marginTop: width * 0.01,
    marginRight: width * 0.05,
  },

  wrapper: {
    flex: 1,
    backgroundColor: Colors.WHITE,
  },

  //form section
  formSection: {
    paddingTop: width * 0.02,
  },
  formLabel: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12),
    color: Colors.TEXT,
  },
  postSection: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: width * 0.02,
  },
  numberIdSection: {
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    backgroundColor: Colors.GREY_LIGHT,
    borderRadius: width,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: width * 0.03,
    paddingVertical: width * 0.005,
  },
  numberIdText: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12),
    color: Colors.TEXT,
  },
  inputSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: Colors.BLACK,
    paddingVertical: width * 0.02,
    marginLeft: width * 0.02,
  },
  input: {
    flex: 1,
    paddingRight: width * 0.02,
    fontSize: RFValue(12),
    color: Colors.TEXT,
    fontFamily: FONTS.poppins[500],
    padding: 0,
  },
  cleanInputIcon: {
    fontSize: RFValue(12),
  },
  inputNote: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(8),
    color: Colors.TEXT,
    marginTop: width * 0.015,
  },
  error: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(9),
    color: Colors.PRIMARY,
    marginTop: width * 0.015,
  },
  phoneIssueButton: {
    marginTop: width * 0.03,
    marginBottom: width * 0.06,
  },
  phoneIssueButtonTitle: {
    fontFamily: FONTS.poppins[500],
    fontSize: RFValue(11),
    color: Colors.PRIMARY,
    textDecorationLine: 'underline',
  },

  // button section
  buttonSignInSection: keyboardHeight => ({
    marginBottom: Platform.OS === 'ios' ? keyboardHeight : width * 0.05,
  }),
  textOr: {
    fontFamily: FONTS.poppins[500],
    fontSize: RFValue(12),
    color: Colors.TEXT,
    textAlign: 'center',
    marginVertical: width * 0.035,
  },

  // translate button
  translateButton: {
    alignSelf: 'flex-end',
    borderWidth: 1,
    paddingHorizontal: width * 0.02,
    paddingVertical: width * 0.01,
    borderRadius: width,
    borderColor: Colors.LINE_STROKE,
    backgroundColor: Colors.GREY_LIGHT,
    marginTop: width * 0.05,
    flexDirection: 'row',
    alignItems: 'center',
  },
  translateButtonIcon: {
    fontSize: RFValue(18),
    color: Colors.TEXT,
  },
  translateButtonImage: {
    width: width * 0.05,
    height: width * 0.05,
    marginLeft: width * 0.02,
  },
});
