//import Slider from "@react-native-community/slider";
import { Children, cloneElement, useContext, useState } from "react";
import { AppContext } from "../../utils";
import { Slider } from "@miblanchard/react-native-slider";
import { Text, View } from "react-native";
import MyIcon from "../Icon";

export default function MySlider({
  style,
  value,
  onValueChange,
  minimumValue,
  maximumValue,
  onSlidingComplete,
}) {
  const appContext = useContext(AppContext);

  /*return (
    <Slider
      style={style}
      minimumValue={minimumValue}
      maximumValue={maximumValue}
      value={value}
      inverted={inverted}
      onValueChange={onValueChange}
      minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
      maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
      thumbTintColor={appContext.appTheme.slider.thumbTintColor}
      step={1}
      onSlidingComplete={onSlidingComplete}
    />
  ); */

  return (
    <View
      style={{
        flex: 1,
        marginLeft: 10,
        marginRight: 10,
        alignItems: "stretch",
        justifyContent: "center",
      }}
    >
      <Slider
        style={style}
        minimumValue={minimumValue}
        maximumValue={maximumValue}
        value={value}
        onValueChange={onValueChange}
        minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
        maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
        thumbTintColor={appContext.appTheme.slider.thumbTintColor}
        step={1}
        onSlidingComplete={onSlidingComplete}
      />
    </View>
  );
}

export function MyTwoThumbsSlider({
  sliderValue,
  appContext,
  unitOfMeasurement,
  iconName,
}) {
  const [value, setValue] = useState(sliderValue);

  const children = (
    <Slider
      animateTransitions
      maximumValue={100}
      minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
      maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
      minimumValue={1}
      step={1}
      thumbTintColor={appContext.appTheme.slider.thumbTintColor}
    />
  );

  const renderChildren = () => {
    return Children.map(children, (child) => {
      if (!!child && child.type === Slider) {
        return cloneElement(child, {
          onValueChange: setValue,
          //renderTrackMarkComponent,
          //trackMarks,
          value,
        });
      }

      return child;
    });
  };

  return (
    <View>
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 10,
        }}
      >
        <MyIcon name={iconName} size={24} />
        <View style={{ flex: 1 }}>{renderChildren()}</View>

        <View style={{ width: 70, alignItems: "center" }}>
          <Text style={{ color: appContext.appTheme.text }}>
            {Array.isArray(value) ? value.join(" - ") : value}
            {unitOfMeasurement}
          </Text>
        </View>
      </View>
    </View>
  );
}

/*
const trackMarkStyles = StyleSheet.create({
  activeMark: {
    borderColor: "red",
    borderWidth,
    left: -borderWidth / 2,
  },
  inactiveMark: {
    borderColor: "grey",
    borderWidth,
    left: -borderWidth / 2,
  },
});
*/
