import { Platform, StyleSheet } from 'react-native';
import { Colors, Radius, Spacing } from '../Consts';
import { scaleSize } from '../Text';

export default StyleSheet.create({
  //input style
  input: {
    flex: 1,
    paddingLeft: Spacing.M,
    fontSize: scaleSize(14),
    height: '100%',
  },
  wrapper: {
    width: '100%',
  },
  container: {
    borderWidth: 1,
    borderRadius: Radius.S,
    height: 56,
  },
  smallContainer: {
    borderRadius: Radius.S,
    borderWidth: 1,
    height: 48,
  },
  floatingView: {
    position: 'absolute',
    top: -10,
    left: Spacing.S,
    paddingHorizontal: Spacing.S,
    flexDirection: 'row',
    alignItems: 'center',
  },
  floatingIcon: { marginLeft: Spacing.XS },
  errorIcon: { marginRight: Spacing.XS, marginTop: Spacing.XXS },
  errorView: {
    flexDirection: 'row',
    marginTop: Spacing.XS,
  },
  inputView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  leadingIconContainer: {
    marginLeft: Spacing.M,
    borderRadius: Radius.XS,
    overflow: 'hidden',
  },
  iconView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: Spacing.XS,
    marginRight: Spacing.M,
  },
  icon: {
    marginLeft: Spacing.S,
  },
  iconWrapper: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputWrapper: {
    flexDirection: 'row',
    marginTop: Spacing.S,
  },

  //text area style
  textAreaView: {
    flex: 1,
  },
  textArea: {
    width: '100%',
    flex: 1,
    paddingRight: Spacing.XS,
    paddingVertical: Spacing.XS,
    fontSize: scaleSize(14),
  },
  textAreaWrapper: {
    borderWidth: 1,
    borderRadius: Radius.S,
    paddingVertical: Spacing.S,
    paddingLeft: Spacing.M,
    paddingRight: Spacing.S,
  },
  countingView: {
    width: '100%',
    alignItems: 'flex-end',
    paddingRight: Spacing.XS,
  },
  rowArea: {
    flexDirection: 'row',
    width: '100%',
    flex: 1,
    marginBottom: Spacing.XS,
  },

  //searchInput
  searchInputWrapper: {
    flexDirection: 'row',
    borderRadius: Radius.XL,
    paddingHorizontal: Spacing.S,
    alignItems: 'center',
    flex: 1,
  },
  searchInput: {
    height: 36,
    marginLeft: Spacing.S,
    flex: 1,
    paddingVertical: Spacing.XS,
  },
  searchInputView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconSearchInput: {
    marginLeft: Spacing.S,
  },
  searchInputContainer: { flexDirection: 'row', alignItems: 'center' },
  textButton: { marginLeft: Spacing.L },
  divider: {
    width: 1,
    height: 20,
    marginLeft: Spacing.XS,
  },
  moneyInput: {
    width: '100%',
    paddingLeft: Spacing.M,
    height: '100%',
    fontSize: scaleSize(20),
    paddingVertical: Spacing.S,
    fontWeight: 'bold',
  },
  inputStyle: {
    color: Colors.black_12,
    fontSize: scaleSize(12),
    height: Platform.select({
      android: 60,
      ios: 36,
    }),
  },
  //OTP
  otpWrapper: {
    width: '100%',
    marginTop: Spacing.M,
  },
  otpInput: {
    height: 56,
    borderRadius: Radius.S,
    justifyContent: 'center',
    borderWidth: 1,
  },
  clearIcon: {
    position: 'absolute',
    right: Spacing.M,
    zIndex: 4,
  },
  otpFloatingView: {
    position: 'absolute',
    top: -Spacing.M + 2,
    alignSelf: 'center',
    paddingHorizontal: Spacing.S,
  },
  otpInputsView: {
    width: '100%',
    height: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  otpRealInputWrapper: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    width: '100%',
    height: '100%',
    opacity: 0.02,
    backgroundColor: 'transparent',
    zIndex: 2,
  },
  otpRealInput: {
    width: '100%',
    height: '100%',
    zIndex: 2,
    opacity: 0.02,
    letterSpacing: Spacing.XXL,
  },
  //DropDown
  inputDropDownWrapper: {
    flexDirection: 'row',
    marginTop: Spacing.S,
  },
  inputDropDownView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: Spacing.M,
  },
  iconViewDropDown: {
    flexDirection: 'row',
    marginRight: Spacing.M,
  },
  textViewDropDown: {
    flex: 1,
    marginVertical: Spacing.S,
    marginRight: Spacing.S,
    justifyContent: 'center',
  },
  multilineContainer: {
    borderWidth: 1,
    borderRadius: Radius.S,
  },
  leadingIconContainerDropDown: {
    borderRadius: Radius.XS,
    overflow: 'hidden',
  },
  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
  phoneNumberDivider: {
    width: 1,
    marginLeft: Spacing.M,
  },
  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
});