import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import ToggleSwitch from 'toggle-switch-react-native'
import colors from '../../../constants/colors'

const CustomSwitch = props => {
  const {
    navigation,
    value,
    onSelectSwitch,
    selectionColor,
    sliderButtonStyle,
    sliderStyle
  } = props

  const updateSwitchData = val => {
    setSelectionMode(val)
    onSelectSwitch(val)
  }

  const styles = StyleSheet.create({
    slider: {
      height: 44,
      width: 215,
      backgroundColor: 'white',
      borderRadius: 25,
      borderWidth: 1,
      borderColor: selectionColor,
      flexDirection: 'row',
      justifyContent: 'center',
      padding: 2,
    },
    sliderButton: {
      flex: 1,

      backgroundColor: 'white',
      borderRadius: 25,
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

  return (
    <ToggleSwitch 
      isOn={value}
      onColor={colors().primaryColor}
      offColor={colors().grayShade_400}
      size='medium'
      onToggle={onSelectSwitch}
    />
  )
}

export default CustomSwitch

