import React from 'react';
import { ViewStyle } from 'react-native';
import { StyleSheet, View } from 'react-native';
import { Switch } from 'react-native-elements';
import { COLORS } from '../common';

interface StyleSwitchProps {
  checked: boolean;
  setChecked: React.Dispatch<React.SetStateAction<boolean>>;
  scale: number;
  disabled?: boolean;
  containerStyle?: ViewStyle;
  switchStyle?: ViewStyle;
}

function StyleSwitch({
  checked,
  setChecked,
  scale,
  disabled,
  containerStyle,
  switchStyle,
}: StyleSwitchProps) {
  const scaleStyle =
    scale !== 1 ? { transform: [{ scaleX: scale }, { scaleY: scale }] } : {};

  return (
    <View style={[styles.container, containerStyle || {}]}>
      <Switch
        value={checked}
        onValueChange={setChecked}
        style={[scaleStyle, switchStyle || {}]}
        color={COLORS.PRIMARY6}
        thumbColor={COLORS.GRAY0}
        trackColor={
          disabled
            ? { true: COLORS.GRAY2, false: COLORS.GRAY2 }
            : { true: COLORS.PRIMARY6, false: COLORS.GRAY4 }
        }
        ios_backgroundColor={disabled ? COLORS.GRAY2 : COLORS.GRAY4}
        hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
        disabled={disabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

StyleSwitch.defaultProps = {
  checked: false,
  scale: 1,
  disabled: false,
};

export default StyleSwitch;
