import React, { ReactNode } from 'react';
import {
  Switch as DefaultSwitch,
  SwitchProps as DefaultSwitchProps,
  Text,
  View,
} from 'react-native';
import { COLORS } from '../../theme';
import { default as cn } from 'classnames';

type ContentLabel = {
  leadingContent?: ReactNode;
  trailingLabel?: string;
  leadingLabel?: never;
  trailingContent?: never;
};

type LabelContent = {
  leadingLabel?: string;
  trailingContent?: ReactNode;
  leadingContent?: never;
  trailingLabel?: never;
};

export type SwitchProps = { classNames?: string } & Pick<
  DefaultSwitchProps,
  'onValueChange' | 'value'
> &
  (ContentLabel | LabelContent);

const Switch = ({
  classNames,
  value,
  onValueChange,
  leadingContent,
  leadingLabel,
  trailingContent,
  trailingLabel,
}: SwitchProps) => {
  return (
    <View className={cn('flex flex-row items-center gap-x-3', classNames ? classNames : '')}>
      {leadingLabel && <Text>{leadingLabel}</Text>}
      {leadingContent && leadingContent}
      <DefaultSwitch
        trackColor={{ false: COLORS.blue[300], true: COLORS.blue[900] }}
        thumbColor={COLORS.white}
        ios_backgroundColor={COLORS.blue[300]}
        onValueChange={onValueChange}
        value={value}
      />
      {trailingLabel && <Text>{trailingLabel}</Text>}
      {trailingContent && trailingContent}
    </View>
  );
};

export default Switch;
