import { Row, TouchableHighlight } from 'components/layout';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { FC, useCallback } from 'react';
import { Switch as LocalSwitch, SwitchProps as LocalSwitchProps } from 'react-native-switch';
import { COLOR_VALUES } from 'theme/color';

export const Switch: FC<SwitchType> = ({
  titlePosition,
  title,
  onValueChange,
  value,
  ...props
}) => {
  const isLeft = titlePosition === 'left' && !!title;
  const handleChange = useCallback(() => {
    if (onValueChange) {
      onValueChange(!value);
    }
  }, [onValueChange, value]);
  return (
    <TouchableHighlight onPress={handleChange} underlayColor="transparent">
      <Row alignItems="center">
        <Visible if={isLeft}>
          <Text variant="caption" mr="xs" color="title">
            {title}
          </Text>
        </Visible>
        <LocalSwitch
          value={value}
          circleActiveColor="white"
          circleInActiveColor="white"
          renderActiveText={false}
          renderInActiveText={false}
          circleBorderWidth={0}
          backgroundActive={COLOR_VALUES.success}
          backgroundInactive={COLOR_VALUES.dark['grey-03']}
          onValueChange={handleChange}
          {...props}
        />
        <Visible if={!isLeft}>
          <Text variant="caption" ml="xs" color="title">
            {title}
          </Text>
        </Visible>
      </Row>
    </TouchableHighlight>
  );
};

type SwitchType = LocalSwitchProps & SwitchProps;

export interface SwitchProps {
  title?: string;
  titlePosition?: 'left' | 'right';
}