import { StyleProp, View, ViewStyle } from 'react-native';
import ToggleSwitch from 'toggle-switch-react-native';
import { tw } from '../../core/tailwind';
import { Text } from './Text';

// "isOn" is omitted here because we handle it ourselves (using value)
type SwitchProps = Omit<React.ComponentProps<typeof ToggleSwitch>, 'isOn'> & {
  onChange: (active: boolean) => boolean | Promise<boolean> | Promise<void>;
  value: boolean;
  label?: string;
  containerStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<ViewStyle>;
  activeText?: string;
  inActiveText?: string;
};

export function Switch({ onChange, value, label, containerStyle, labelStyle, ...restProps }: SwitchProps) {
  return (
    <View style={[tw`flex-row`, containerStyle]}>
      <ToggleSwitch
        isOn={value}
        onColor="green"
        label={''}
        labelStyle={[tw`ml-2 text-base font-medium`, labelStyle]}
        size="medium"
        offColor={tw.color('bg-gray-300')}
        onToggle={onChange}
        {...restProps}
      />
      {label ? <Text style={[tw`ml-2 text-base font-medium`, labelStyle]}>{label}</Text> : null}
    </View>
  );
}