import { useIsFocused } from "@react-navigation/core";
import React, { useState, useEffect } from "react";
import {
  View,
  Image,
  StyleSheet,
  TextInput as NativeTextInput,
  TouchableOpacity,
  Animated,
  Easing,
  Platform,
} from "react-native";
import {
  TextInput as PaperTextInput,
  Switch as PaperSwitch,
  Text,
  Button as PaperButton,
  configureFonts,
  TouchableRipple,
} from "react-native-paper";
// import { useIsFocused } from '@react-navigation/native';
import Colors from "./Colors";
// import { FloatingLabelInput } from 'react-native-floating-label-input';
import SpinnerOverlay from "react-native-loading-spinner-overlay";
import style from "../../../../Components/common/CommonStyle";
import MIcon from "react-native-vector-icons/MaterialIcons";
// import { translate } from '../../common/localize/i18n';

// //IMAGES
// const check_icon = require('../../../android/images/baseline_check_white_18dp.png');
// const dawn_arrow_icon = require('../../../android/images/arrowDown.png');

// export const Checkbox = props => {
//   const { status, onPress, style, label, labelStyle, buttonStyle, isdisabled, isTickNotShown } = props;

//   const primaryColor = isdisabled ? '#BBBBBB' : status ? Colors.digitYellow : Colors.white;
//   return (
//     <TouchableOpacity disabled={isdisabled} onPress={onPress} style={[styles.checkboxContainer, style]}>
//       <View
//         style={[
//           styles.checkbox,
//           {
//             borderColor: status ? primaryColor : '#BBBBBB',
//             backgroundColor: primaryColor,
//           },
//           buttonStyle,
//         ]}
//       >
//         {!isTickNotShown || status ? (
//           <Image source={check_icon} style={{ width: 18, height: 18, tintColor: status ? Colors.white : primaryColor }} />
//         ) : null}
//       </View>
//       <Text style={[styles.checkboxLabel, labelStyle]}>{label}</Text>
//     </TouchableOpacity>
//   );
// };

// export const ButtonWithIcon = props => {
//   const {
//     value,
//     label,
//     onPress,
//     style,
//     containerStyle,
//     labelStyle,
//     textStyle,
//     icon,
//     hasValue,
//     errorMsge,
//     isRecommended,
//     disabled,
//     healthPolicyPage,
//   } = props;
//   return (
//     <View style={style}>
//       <TouchableOpacity disabled={disabled} onPress={onPress} style={{ paddingTop: 6 }}>
//         <View style={[styles.buttonWithIconContainer, containerStyle, { backgroundColor: disabled ? '#f5f5f5' : 'white' }]}>
//           <Text
//             style={[styles.buttonWithIconValue, { color: hasValue ? Colors.darkBlack : Colors.veryLightGray, fontFamily: 'Muli-Regular' }, textStyle]}
//           >
//             {value}
//           </Text>
//           {healthPolicyPage ? (
//             <Text
//               style={{
//                 position: 'absolute',
//                 top: '35%',
//                 left: '28%',
//                 paddingHorizontal: 10,
//                 height: 16,
//                 borderRadius: 5,
//                 backgroundColor: '#0BB86B',
//                 fontFamily: 'Muli-Bold',
//                 fontSize: 11,
//                 color: Colors.white,
//               }}
//             >
//               {translate('Recommended')}
//             </Text>
//           ) : null}
//           {isRecommended ? (
//             <View>
//               <Text style={styles.recommendedText}>{translate('Recommended')}</Text>
//             </View>
//           ) : null}
//           <Text style={[styles.buttonWithIconLabel, { backgroundColor: label ? '#fff' : 'transparent' }, labelStyle]}>{label}</Text>
//           {icon ? <Image source={icon} style={[styles.BtnIconStyle, props.imageProperty]} /> : null}
//         </View>
//       </TouchableOpacity>
//       {errorMsge ? errorMsge : null}
//     </View>
//   );
// };

// export const DateInput = props => {
//   const { label, value, onFocus, customLabelStyles, onBlur, onChangeText, containerStyles, inputStyles, disabled } = props;
//   return (
//     <FloatingLabelInput
//       editable={!disabled}
//       onEndEditing={onBlur}
//       label={label}
//       value={value}
//       keyboardType="numeric"
//       hintTextColor={Colors.veryLightGray}
//       mask="24/05/2000"
//       maskType="date"
//       staticLabel
//       hint="DD/MM/YYYY"
//       onFocus={onFocus}
//       onBlur={onBlur}
//       blurOnSubmit
//       containerStyles={{
//         borderWidth: 2,
//         paddingHorizontal: 10,
//         borderColor: Colors.lightGray,
//         borderRadius: 5,
//         ...containerStyles,
//       }}
//       customLabelStyles={{
//         colorFocused: Colors.veryLightGray,
//         fontSizeFocused: 11,
//         ...customLabelStyles,
//       }}
//       labelStyles={{
//         backgroundColor: '#fff',
//         paddingHorizontal: 5,
//         marginLeft: -13,
//         fontFamily: 'Muli-Bold',
//         color: Colors.veryLightGray,
//         ...customLabelStyles,
//       }}
//       inputStyles={{
//         color: Colors.darkBlack,
//         paddingHorizontal: 15,
//         fontFamily: 'Muli-Regular',
//         fontSize: 16,
//         ...inputStyles,
//       }}
//       onChangeText={onChangeText}
//     />
//   );
// };

export const TextInput = React.forwardRef((props, ref) => {
  const {
    style,
    label,
    labelStyle,
    errorMsge,
    textStyle,
    addKgs,
    setKgs,
    memberSelectionPage,
    fourWheelerPage,
    noLabel,
    disabled,
    numberPad,
    forceUpperCase,
    alphaNumeric,
    onChangeText = () => {},
  } = props;
  const [focus, setFocus] = useState(false);
  const fontConfig = {
    default: {
      regular: {
        fontFamily: "Muli-Regular",
        fontWeight: "normal",
      },
    },
  };

  let keyboardTypeProps = {};
  if (memberSelectionPage || fourWheelerPage || numberPad) {
    keyboardTypeProps.keyboardType = "number-pad";
  }

  let uppercaseParams = {};
  if (forceUpperCase || alphaNumeric) {
    uppercaseParams = {
      secureTextEntry: Platform.OS === "ios" ? false : true,
      keyboardType: "visible-password",
    };
  }
  return (
    <View style={[style, props.paddingStyle ? { paddingLeft: 20 } : null]}>
      <PaperTextInput
        mode="outlined"
        {...keyboardTypeProps}
        selectionColor={Colors.veryLightGray}
        placeholder={memberSelectionPage ? "DD-MM-YYYY" : null}
        disabled={disabled ? disabled : false}
        theme={{
          colors: {
            primary: Colors.digitYellow,
            background: disabled ? "#f5f5f5" : Colors.white,
            placeholder: "#DDDDDD",
          },
          fonts: configureFonts(fontConfig),
        }}
        onFocus={() => {
          setFocus(true);
          addKgs ? setKgs(false) : null;
        }}
        onBlur={() => {
          setFocus(false);
          addKgs ? setKgs(true) : null;
        }}
        {...props}
        label={
          noLabel ? null : (
            <Text
              style={[
                focus ? styles.textinputLabelfocussed : styles.textinputLabel,
                labelStyle,
                { backgroundColor: disabled ? "#f5f5f5" : Colors.white },
              ]}
            >
              {label}
              <Text
                style={{
                  backgroundColor: disabled ? "#f5f5f5" : "white",
                  color: "white",
                }}
              >
                {" ."}
              </Text>
            </Text>
          )
        }
        {...uppercaseParams}
        onChangeText={(text) => {
          if (forceUpperCase) text = text.toUpperCase();
          if (alphaNumeric) {
            let pattern = /[^0-9a-zA-Z]/g;
            text = text.replace(pattern, "");
          }
          onChangeText(text);
        }}
        style={[styles.textinput, textStyle]}
        ref={ref}
      />
      {errorMsge ? errorMsge : null}
    </View>
  );
});

// export const DropDown = props => {
//   const {
//     value,
//     label,
//     onPress,
//     style,
//     containerStyle,
//     labelStyle,
//     buttonStyle,
//     buttonLabel,
//     onChangeText,
//     keyboardType,
//     inputStyle,
//     buttonLabelStyle,
//     isButtonDisabled,
//     editable,
//     leftText,
//   } = props;
//   return (
//     <TouchableRipple style={style} onPress={onPress}>
//       <View
//         style={{
//           paddingVertical: 13,
//           paddingHorizontal: 16,
//           borderWidth: 1,
//           borderColor: Colors.lightGray,
//           borderRadius: 4,
//           flexDirection: 'row',
//           justifyContent: 'space-between',
//           alignItems: 'center',
//           position: 'relative',
//         }}
//       >
//         <Text
//           style={{
//             fontFamily: 'Muli-Regular',
//             fontSize: 14,
//             color: '#999999',
//           }}
//         >
//           {value}
//         </Text>
//         {label && (
//           <Text
//             style={{
//               position: 'absolute',
//               top: -12,
//               left: 10,
//               fontFamily: 'Muli-Bold',
//               fontSize: 13,
//               color: Colors.veryLightGray,
//               backgroundColor: Colors.white,
//               paddingHorizontal: 10,
//             }}
//           >
//             {label}
//           </Text>
//         )}
//         <Image source={dawn_arrow_icon} width={8} height={4} />
//       </View>
//     </TouchableRipple>
//   );
// };

// export const TextInputButton = props => {
//   const {
//     value,
//     label,
//     onPress,
//     style,
//     containerStyle,
//     labelStyle,
//     buttonStyle,
//     buttonLabel,
//     onChangeText,
//     keyboardType,
//     inputStyle,
//     buttonLabelStyle,
//     isButtonDisabled,
//     editable,
//     leftText,
//     isEnabled,
//     errorMsge,
//     leftTextStyle,
//     maxLength,
//     ButtonComponent,
//   } = props;
//   return (
//     <>
//       <View style={style}>
//         <View style={[styles.buttonWithIconContainer, containerStyle]}>
//           {leftText && (
//             <Text
//               style={[
//                 {
//                   fontSize: 17,
//                   marginLeft: 16,
//                 },
//                 leftTextStyle,
//               ]}
//             >
//               {leftText}
//             </Text>
//           )}
//           <NativeTextInput
//             keyboardType={keyboardType}
//             style={[styles.inputbutton, inputStyle]}
//             value={value}
//             onChangeText={onChangeText}
//             maxLength={maxLength ? maxLength : null}
//             editable={editable}
//           />
//           <Text style={[styles.buttonWithIconLabel, { backgroundColor: label ? '#fff' : 'transparent' }, labelStyle]}>{label}</Text>

//           {ButtonComponent ? (
//             <ButtonComponent onPress={onPress} disabled={isButtonDisabled} />
//           ) : (
//             <TouchableOpacity onPress={onPress} disabled={isButtonDisabled}>
//               <View style={[styles.inputbuttonsubmit, { backgroundColor: isEnabled ? '#FFBB00' : Colors.veryLightGray }, buttonStyle]}>
//                 <Text style={[styles.inputbuttonsubmitLabel, buttonLabelStyle]}>{buttonLabel}</Text>
//               </View>
//             </TouchableOpacity>
//           )}
//         </View>
//       </View>
//       {errorMsge ? errorMsge : null}
//     </>
//   );
// };

// //TEXTS
// export const Label = ({ children, style }) => {
//   return <Text style={[styles.label, style]}>{children}</Text>;
// };

// export const SmallBoldText = ({ children, style }) => {
//   return <Text style={[styles.smallboldtext, style]}>{children}</Text>;
// };

// export const Heading = ({ children, style }) => {
//   return <Text style={[styles.heading, style]}>{children}</Text>;
// };

// export const LabeledText = ({ children, style, label, labelStyle, textStyle, inline }) => {
//   return (
//     <View style={style}>
//       <Text style={inline ? styles.changedStyle : [styles.labeledTextLabel, labelStyle]}>{translate(label)}</Text>
//       <Text style={inline ? styles.changedStyleOne : [styles.labeledText, textStyle]}>{children}</Text>
//     </View>
//   );
// };

// //BUTTONS
// export const SmallButton = props => {
//   const { children, style, onPress, labelStyle } = props;
//   return (
//     <TouchableOpacity onPress={onPress}>
//       <View style={[styles.smallbutton, style]}>
//         <Text style={[styles.smallbuttonlabel, labelStyle]}>{children}</Text>
//       </View>
//     </TouchableOpacity>
//   );
// };

export const PrimaryButton = (props) => {
  const { children, style, onPress, mode, labelStyle } = props;
  return (
    <PaperButton
      uppercase={false}
      labelStyle={[styles.buttonlabel, labelStyle]}
      color={Colors.digitYellow}
      onPress={onPress}
      contentStyle={{ height: 48 }}
      mode="contained"
      {...props}
      style={[
        styles.button,
        { borderWidth: mode == "outlined" ? 1 : 0 },
        style,
      ]}
    >
      {children}
    </PaperButton>
  );
};

export const DashedButton = (props) => {
  const {
    Title,
    leftImage,
    RightImage,
    onDeletePress,
    leftIcon,
    buttonTextStyle,
    buttonLayoutStyle,
  } = props;
  const deletePress = () => {
    onDeletePress();
  };
  return (
    <View style={[styles.buttonStyle, styles.button, buttonLayoutStyle]}>
      <View style={{ flex: 0.2, flexDirection: "column" }}>
        {leftImage && (
          <Image source={leftImage} style={{ width: 24, height: 24 }} />
        )}
        {leftIcon && <View style={{ width: 24, height: 24 }}>{leftIcon}</View>}
      </View>
      <View
        style={{
          flex: 0.65,
          flexDirection: "column",
        }}
      >
        <Text
          style={[styles.buttonText, buttonTextStyle]}
          // numberOfLines={1}
          // ellipsizeMode="middle"
        >
          {Title}
        </Text>
      </View>
      <TouchableOpacity
        style={{
          flex: 0.1,
          flexDirection: "column",
        }}
        hitSlop={{ top: 24, bottom: 24, right: 24, left: 24 }}
        onPress={() => {
          deletePress();
        }}
      >
        <Image
          source={RightImage}
          style={{
            width: 22,
            height: 22,
            marginLeft: 4,
            alignSelf: "flex-end",
          }}
        />
      </TouchableOpacity>
      {/* <View
        style={{
          flex: 0.1,
          flexDirection: "column",
          backgroundColor: "yellow",
        }}
      >
        {leftImage && (
          <Image source={leftImage} style={{ width: 24, height: 24 }} />
        )}
        {leftIcon && <View style={{ width: 24, height: 24 }}>{leftIcon}</View>}
      </View>
      <View
        style={[
          buttonTextStyle,
          { flex: 0.8, flexDirection: "column", backgroundColor: "red" },
        ]}
      >
        <Text style={styles.buttonText}>{Title}</Text>
      </View>
      <TouchableOpacity
        onPress={() => {
          deletePress();
        }}
      >
        <View
          style={{
            justifyContent: "center",
            flex: 0.1,
            // marginLeft: 8,
            flexDirection: "column",
          }}
        >
          <Image
            source={RightImage}
            style={{
              width: 24,
              height: 24,
              marginLeft: 4,
              alignSelf: "flex-end",
            }}
          />
        </View>
      </TouchableOpacity> */}
    </View>
  );
};

export const RoundButton = (props) => {
  const { Title, onClicked, style } = props;
  const onTouch = () => {
    onClicked();
  };
  return (
    <TouchableOpacity
      onPress={() => {
        onTouch();
      }}
    >
      <View style={[styles.roundButtonStyle, style]}>
        <Text style={styles.roundButtonText}>{Title}</Text>
      </View>
    </TouchableOpacity>
  );
};
// export const IconButton = props => {
//   const { style, onPress, icon } = props;
//   return (
//     <TouchableOpacity onPress={onPress}>
//       <View style={[styles.iconbutton, style]}>
//         <Image source={icon} style={{ width: 20, height: 20 }} />
//       </View>
//     </TouchableOpacity>
//   );
// };

export const NewRoundButton = (props) => {
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={[
        {
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
          borderWidth: 1,
          borderColor: "#DDDDDD",
          borderRadius: 12,
          padding: 10,
          alignSelf: "center",
          marginVertical: 16,
        },
        props.style,
      ]}
      onPress={props.onPress}
    >
      <View
        style={{
          flexDirection: "column",
          justifyContent: "space-evenly",
          alignItems: "baseline",
        }}
      >
        {/* <Text style={{ textAlign: "center", fontSize: 14, }}>
                  Renew your Digit Policy instantly
                </Text> */}
        <Text style={[style.muliBoldDB, { color: "#999999" }]}>
          {props.children}
        </Text>
      </View>
      <MIcon
        name="keyboard-arrow-right"
        size={18}
        color={Colors.digitYellow}
        style={{ marginLeft: 8, marginTop: 2 }}
      />
    </TouchableOpacity>
  );
};

export const NewRadioButton = (props) => {
  const DISABLED_COLOR = "#DDDDDD";
  const ENABLED_COLOR = Colors.digitYellow;
  return (
    <TouchableOpacity
      style={{
        width: "48%",
        flexDirection: "row",
        justifyContent: "space-evenly",
        alignItems: "center",
        borderRadius: 4,
        paddingHorizontal: 8,
        paddingVertical: 12,
        backgroundColor: "#FFFFFF",
        borderWidth: 1,
        borderColor: props.enabled ? ENABLED_COLOR : DISABLED_COLOR,
      }}
      activeOpacity={0.7}
      onPress={() => {
        props.onPress();
        props.onSelected();
      }}
    >
      <View
        style={{
          borderRadius: 50,
          borderWidth: 2,
          borderColor: props.enabled ? ENABLED_COLOR : DISABLED_COLOR,
        }}
      >
        <View
          style={{
            height: 14,
            width: 14,
            backgroundColor: props.enabled ? ENABLED_COLOR : "transparent",
            borderRadius: 50,
            margin: 2,
          }}
        />
      </View>
      <Text style={style.muliRegDB}>{props.children}</Text>
    </TouchableOpacity>
  );
};

export const Spinner = ({ loading }) => {
  const focused = useIsFocused();
  if (loading) {
    return (
      <SpinnerOverlay
        animation="slide"
        visible={loading && focused}
        // textContent={'Loading...'}
        color={Colors.digitYellow}
      />
    );
  } else return null;
};

// export const Switch = props => {
//   // const { isOn, onColor, offColor, style, onToggle, labelStyle, label } = props;
//   const { value, onValueChange, label, labelStyle, buttonStyle, style, disabled } = props;
//   const color = value ? Colors.green : '#E6E3Dc';
//   const [margin, setMargin] = useState(new Animated.Value(0));

//   useEffect(() => {
//     animateBall(value);
//   }, [value]);
//   const changeHandler = () => {
//     animateBall(!value); // passing !value cause state value will change after the animation
//     onValueChange();
//   };

//   const animateBall = toValue => {
//     Animated.timing(margin, {
//       toValue: toValue ? 20 : 0,
//       duration: 300,
//       useNativeDriver: true,
//       easing: Easing.linear,
//     }).start();
//   };
//   return (
//     <View style={[styles.switchContainer, style]}>
//       <TouchableOpacity onPress={changeHandler} disabled={!!disabled}>
//         <View style={[styles.toggleContainer, { backgroundColor: color }]}>
//           <Animated.View
//             style={[
//               styles.toggleWheelStyle,
//               {
//                 transform: [{ translateX: margin }],
//               },
//             ]}
//           ></Animated.View>
//         </View>
//       </TouchableOpacity>
//       <Text style={[styles.switchLabel, labelStyle]}>{!!label ? translate(label) : label}</Text>
//     </View>
//   );
// };

// export const Divider = ({ text }) => {
//   return <View style={styles.dividerContatainer}>{text && <Text style={styles.dividerText}>{text}</Text>}</View>;
// };

export const Ibutton = () => {
  return (
    <View
      style={{
        borderRadius: 25,
        borderWidth: 2,
        borderColor: Colors.digitYellow,
        height: 24,
        width: 24,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={[style.muliBoldDB, { color: Colors.borderBlack }]}>i</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  //SWITCH
  changedStyle: {
    color: "gray",
    fontFamily: "Muli-Regular",
    fontSize: 12,
  },
  changedStyleOne: {
    color: "black",
    fontFamily: "Muli-Regular",
  },
  switchContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  switchLabel: {
    fontFamily: "Muli-Bold",
    fontSize: 13,
    color: Colors.darkBlack,
    marginLeft: 12,
  },
  //CHECKBOX
  checkbox: {
    borderRadius: 2,
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center",
    width: 28,
    height: 28,
    backgroundColor: "green",
  },
  checkboxLabel: {
    color: Colors.borderBlack,
    fontSize: 13,
    fontFamily: "Muli-Regular",
    marginLeft: 12,
  },
  checkboxContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  //DATEPICKER
  buttonWithIconContainer: {
    borderWidth: 1,
    borderColor: Colors.veryLightGray,
    borderRadius: 4,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
  },
  buttonWithIconLabel: {
    position: "absolute",
    top: "-21%",
    left: "2%",
    fontSize: 11,
    color: Colors.veryLightGray,
    fontFamily: "Muli-Bold",
    paddingHorizontal: 5,
  },
  buttonWithIconValue: {
    flex: 1,
    color: Colors.veryLightGray,
    paddingHorizontal: 4,
    paddingVertical: 14,
  },
  //TEXTINPUT
  textinput: {
    fontSize: 16,
    color: Colors.darkBlack,
    fontFamily: "Muli-Bold",
  },
  textinputLabel: {
    color: "#999999",
    fontFamily: "Muli-Medium",
    backgroundColor: Colors.white,
    fontSize: 14,
  },
  textinputLabelfocussed: {
    color: "#000000",
    fontFamily: "Muli-Bold",
    backgroundColor: Colors.white,
    fontSize: 13,
  },
  //TEXTINPUTBUTTON
  inputbutton: {
    flex: 1,
    fontSize: 16,
    fontFamily: "Muli-Regular",
    color: Colors.darkBlack,
    paddingHorizontal: 4,
    paddingVertical: 14,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  inputbuttonsubmit: {
    borderRadius: 4,
    backgroundColor: Colors.lightGray,
  },
  inputbuttonsubmitLabel: {
    paddingHorizontal: 17,
    paddingVertical: 7,
    fontFamily: "Muli-ExtraBold",
    fontSize: 14,
    color: Colors.veryLightGray,
  },
  //LABEL
  label: {
    fontFamily: "Muli-Regular",
    fontSize: 13,
    color: Colors.veryLightGray,
  },
  //SMALL BOLD TEXT
  smallboldtext: {
    fontSize: 13,
    fontFamily: "Muli-Bold",
    color: Colors.darkBlack,
  },
  //HEADING
  heading: {
    fontFamily: "Muli-ExtraBold",
    fontSize: 16,
    color: Colors.darkBlack,
  },
  //LABELEDTEXT
  labeledTextLabel: {
    fontFamily: "Muli-Bold",
    fontSize: 14,
    color: Colors.darkBlack,
  },
  labeledText: {
    fontFamily: "Muli-Regular",
    fontSize: 16,
    color: Colors.borderBlack,
    marginTop: 2,
  },
  //SMALL BUTTON
  smallbutton: {
    borderWidth: 1,
    borderColor: Colors.borderBlack,
    borderRadius: 4,
    paddingHorizontal: 9,
    paddingVertical: 5,
  },
  smallbuttonlabel: {
    fontSize: 11,
    fontFamily: "Muli-ExtraBold",
    color: Colors.darkBlack,
  },
  //BUTTON
  button: {
    borderRadius: 4,
    minWidth: 20,
    borderColor: Colors.borderBlack,
    minHeight: 48,
    justifyContent: "center",
  },
  buttonlabel: {
    fontSize: 16,
    fontFamily: "Muli-Black",
    color: Colors.darkBlack,
    letterSpacing: 0,
  },
  //ICONBUTTON
  iconbutton: {
    paddingHorizontal: 14,
    paddingVertical: 14,
    borderWidth: 1,
    borderColor: Colors.borderBlack,
    borderRadius: 4,
  },
  BtnIconStyle: {
    width: 22,
    height: 24,
    paddingHorizontal: 8.5,
  },

  //CustomSwitch
  switchContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  toggleContainer: {
    borderRadius: 200,
    width: 40,
    height: 20,
    marginLeft: 3,
    justifyContent: "center",
  },
  toggleWheelStyle: {
    width: 14,
    height: 14,
    borderRadius: 200,
    backgroundColor: Colors.white,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    marginLeft: 2,
    shadowOpacity: 0.2,
    shadowRadius: 2.5,
    elevation: 1.5,
  },
  recommendedText: {
    height: 16,
    backgroundColor: "#0BB86B",
    fontFamily: "Muli-Bold",
    fontSize: 11,
    color: Colors.white,
    position: "relative",
  },
  //divider
  dividerContatainer: {
    backgroundColor: Colors.lightGray,
    height: 2,
    position: "relative",
    marginVertical: 16,
    alignItems: "center",
  },
  dividerText: {
    textAlignVertical: "center",
    top: -10,
    backgroundColor: Colors.white,
    paddingHorizontal: 5,
    color: Colors.veryLightGray,
    fontFamily: "Muli-Bold",
    fontSize: 12,
  },
  buttonStyle: {
    borderColor: "#444444",
    borderWidth: 1,
    borderRadius: 4,
    borderStyle: "dashed",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-evenly",
    margin: 16,
  },
  buttonText: {
    fontFamily: "Muli-Bold",
    fontSize: 14,
    flexWrap: "wrap",
    // marginLeft: 16,
    // textAlign: "center",
  },
  roundButtonStyle: {
    height: 50,
    borderColor: "#DDDDDD",
    borderWidth: 1,
    borderRadius: 16,
  },
  roundButtonText: {
    fontFamily: "Muli-Regular",
    fontSize: 13,
    color: "#444444",
    alignSelf: "center",
  },
});
