import { Gesture, GestureDetector } from 'react-native-gesture-handler';

// A button that executes an action on pinch
type Props = {
  onPinch?: () => void;
  isDisabled?: boolean;
  style?: ViewStyle
} & ViewProps;
function MyPinchButton({ onPinch, isDisabled, style, ...rest }: Props): {
  let gesture = Gesture.Pinch()...onEnd(/* if !isDisabled call onPinch */);

  return (<GestureDetector gesture={gesture}><View style={style} {...rest}/></GestureDetector>);
}

// A button that executes an action on pinch
type Props = {
  ...
  style?: ViewStyle | ({ isDisabled }) => ViewStyle;
} & ViewProps;
function MyPinchButton({ onPinch, isDisabled = false, style: _style, ...rest }: Props): {
  // ...
  let style = typeof _style === "function" : _style({ isDisabled }) : _style;
  return (<GestureDetector gesture={gesture}><View style={style} {...rest}/></GestureDetector>);
}

function StyledPinchButton({ classNames, ...rest }) {
  let style = useResolvedClassNames(classNames, { qualifiers: { disabled: rest.isDisabled } }); // turns on `disabled` qualifiers.
  return <StyledPinchButton style={style} ...rest />;
};

function StyledPinchButton({ classNames, ...rest }) {
  let style = useResolvedClassNames(classNames, { dataQualifiers: { "disabled": rest.isDisabled } }); // turns on `data-[disabled]` qualifiers.
  return <StyledPinchButton style={style} ...rest />;
};

let StyledMyPinchButton = withUniwind(MyPinchButton, {
  style: { 
    styleType: "function",
    qualifierMapping: ({ isDisabled }) => ({ disabled }) 
  }
});