import React from 'react'
import { Platform, Switch as ReactNativeSwitch } from 'react-native'
import type { SwitchProps } from 'react-native'
import { useTheme } from '../../hooks'

// =================================
// ====== Component ================
// =================================

export function Switch({ disabled, value, ...props }: SwitchProps) {
  const { colors } = useTheme()

  const platformThumbColor = Platform.select({
    android: value && !disabled ? colors.androidSwitchThumbColor : colors.fillColorNeutral050Base,
    ios: undefined,
  })
  const platformTrackColor = Platform.select({
    android: {
      true: disabled ? colors.fillColorNeutral060 : undefined,
      false: disabled ? colors.fillColorNeutral060 : colors.fillColorNeutral030,
    },
    ios: undefined,
  })

  return (
    <ReactNativeSwitch
      {...props}
      thumbColor={platformThumbColor}
      trackColor={platformTrackColor}
      value={value}
      disabled={disabled}
    />
  )
}