import React from 'react';
import {Pressable, StyleProp, ViewStyle} from 'react-native';
import {
  useInputController,
  UseInputControllerProps,
} from '@components/_HuGo/Inputs';
import {Toggle, ToggleProps} from '@components/_HuGo/Toggle';
import {Title} from '@components/_HuGo/Title';

import {styles} from './styles';

interface SwitchProps extends Omit<ToggleProps, 'style'> {
  title: string;
  titleNumberOfLines?: number;
  titleStyle?: StyleProp<ViewStyle>;
  description?: string;
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
  descriptionNumberOfLines?: number;
}

export function Switch({
  title,
  titleNumberOfLines = 1,
  titleStyle,
  description,
  style,
  disabled,
  value,
  onToggle,
  descriptionNumberOfLines = 2,
  ...toggleProps
}: SwitchProps) {
  const onPress = () => onToggle(!value);

  return (
    <Pressable onPress={onPress} style={[styles.container, style]}>
      <Title
        title={title}
        titleNumberOfLines={titleNumberOfLines}
        description={description}
        descriptionNumberOfLines={descriptionNumberOfLines}
        size="s"
        disabled={disabled}
        style={titleStyle}
      />
      <Toggle
        value={value}
        onToggle={onPress}
        disabled={disabled}
        {...toggleProps}
      />
    </Pressable>
  );
}

type SwitchControllerProps = Omit<SwitchProps, 'value' | 'onToggle'> &
  UseInputControllerProps;

export function SwitchController({
  name,
  showSuccess,
  ...props
}: SwitchControllerProps) {
  const {onChange, ...inputController} = useInputController({
    name,
    showSuccess,
  });

  return <Switch {...props} {...inputController} onToggle={onChange} />;
}