import Slider from "@react-native-community/slider";
import { View } from "react-native";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { SliderWidgetData } from "../../App/common/interface/widgets/widgetData/SliderWidgetData";

const SliderWidget = ({
  widgetData,
  handleActions,
  widgetIndex,
}: {
  widgetData: SliderWidgetData;
  handleActions: (
    value: any | undefined | null,
    actionPayloadList: GenericActionPayload | undefined
  ) => void;
  widgetIndex: number;
}) => {
  let valueChangeActionPayload: GenericActionPayload | undefined =
    widgetData.onValueChangeAction;
  let sliderReleaseActionPayloadSequence: GenericActionPayload | undefined =
    widgetData.onSliderReleaseActionSequence;

  return (
    <View>
      <Slider
        style={widgetData.sliderStyle}
        minimumValue={widgetData.minimumValue}
        maximumValue={widgetData.maximumValue}
        minimumTrackTintColor="#999"
        maximumTrackTintColor="#000000"
        onValueChange={(value) => {
          handleActions(
            value,
            !!valueChangeActionPayload ? valueChangeActionPayload : {}
          );
        }}
        onSlidingComplete={(value) => {
          handleActions(value, sliderReleaseActionPayloadSequence);
        }}
      />
    </View>
  );
};

export default SliderWidget;