import React from 'react';
import { StyleSheet, Switch, SwitchProps, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';
import { SIZES } from '../../constants/theme';

interface ToggleSettingProps extends SwitchProps {
  settingsTitle: string;
}

export function ToggleSetting(props: ToggleSettingProps) {
  const {settingsTitle, ...rest} = props;
  const { colors } = useTheme()

  return (

    <View style={[{ backgroundColor: colors.containerColor}, styles.settingsTile]}>
      <Text style={[styles.settingTitle, {color: rest.disabled ? colors.secondaryText: colors.primaryText }]}>
       {settingsTitle}
      </Text>
      <Switch 
        {...rest}
        thumbColor={rest.thumbColor === undefined ? colors.accentColor: rest.thumbColor}
        trackColor={rest.trackColor === undefined ? {true: "#E88C3F", false: colors.elementDefaultColor}: rest.trackColor}

        ></Switch>
    </View>
   
  )
}

interface ButtonSettingProps extends TouchableOpacityProps {
  settingsTitle: string,
}

export function ButtonSetting(props: ButtonSettingProps){
  const {settingsTitle, ...rest} = props;
  const { colors } = useTheme();

  return (
    <TouchableOpacity {...rest}>
      <View style={[styles.settingsTile, {backgroundColor: colors.containerColor}]}>
        <Text style={[styles.settingTitle, {color: colors.primaryText}]}>{settingsTitle}</Text>
      </View>
    </TouchableOpacity>
  )
}


const styles = StyleSheet.create({
  settingTitle: {
    fontSize: SIZES.large
  },
  settingsTile: {
      width: "100%",
      minHeight: 60,
      paddingVertical: 5,
      paddingHorizontal: 20,
      borderRadius: 80,
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      marginBottom: 10
  }
})