import { StyleSheet } from 'react-native'

import type { ThemeVarType } from '../theme'

export const createStyles = (themeVar: ThemeVarType) => {
  return StyleSheet.create({
    fix_group: {
      flexDirection: 'row',
      paddingHorizontal: themeVar.text_input_padding_horizontal,
    },

    fix_group_disabled: {
      backgroundColor: themeVar.text_input_disabled_background_color,
    },

    fix_group_border: {
      borderWidth: 1,
      borderRadius: themeVar.border_radius_sm,
      borderColor: themeVar.border_color,
    },

    fix_text: {
      color: themeVar.text_input_color,
      alignSelf: 'center',
    },

    fix_text_pre: {
      marginRight: themeVar.text_input_padding_horizontal,
    },

    fix_text_suf: {
      marginLeft: themeVar.text_input_padding_horizontal,
    },

    text_input: {
      flex: 1,
      paddingHorizontal: 0,
      paddingVertical: 0,
      marginHorizontal: 0,
      marginVertical: 0,
      color: themeVar.text_input_color,
    },

    text_input_disabled: {
      color: themeVar.text_input_disabled_color,
    },

    clearable: {
      alignSelf: 'center',
      width: themeVar.text_input_clearable_size,
      height: themeVar.text_input_clearable_size,
      borderRadius: themeVar.text_input_clearable_size / 2,
      backgroundColor: themeVar.text_input_clearable_background_color,
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: themeVar.text_input_padding_horizontal,
    },
  })
}