import * as React from 'react';
import { View } from 'react-native';

import { Text } from '~/components/text';
import { enhanceTextStyle } from '~/utils/styles';

import { Switch } from './switch';
import { LabeledSwitchProps } from './switch.props';
import { labeledSwitchStyle as styles } from './switch.styles';

export const LabeledSwitch: React.FunctionComponent<LabeledSwitchProps> = (props) => {
  const {
    onToggle,
    value,
    label,
    labelTx,
    offLabel,
    offLabelTx,
    onLabel,
    onLabelTx,
    style,
    textStyle,
    ...rest
  } = props;
  const labelStyle = enhanceTextStyle([styles.label, textStyle]);
  const offLabelStyle = enhanceTextStyle([styles.offLabel, textStyle]);
  const onLabelStyle = enhanceTextStyle([styles.onLabel, textStyle]);

  return (
    <View style={style}>
      {(label || labelTx) && <Text style={labelStyle} text={label} tx={labelTx} />}
      <View style={styles.switchContainer}>
        {(offLabelTx || offLabel) && <Text style={offLabelStyle} text={offLabel} tx={offLabelTx} />}
        <Switch value={value} onToggle={onToggle} {...rest} />
        {(onLabelTx || onLabel) && <Text style={onLabelStyle} text={onLabel} tx={onLabelTx} />}
      </View>
    </View>
  );
};
