import { Motion } from "@legendapp/motion";
import { Pressable, View } from "react-native";
import { Easing } from "react-native-reanimated";

import { Palette } from "../styles";
import { LinearGradient } from "./LinearGradient/LinearGradient";

export default ({ value, setValue, containerStyle = {} }) => {
  const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"];

  const switchHeight = 28;
  const internalMargin = 2;

  const itemSize = switchHeight - internalMargin * 2;

  return (
    <Pressable onPress={() => setValue(!value)}>
      <LinearGradient
        colors={currentColor}
        style={{
          flexDirection: "row",
          width: switchHeight * 2,
          height: switchHeight,
          borderRadius: 25,
          backgroundColor: "red",
          ...containerStyle,
        }}
      >
        <Motion.View
          animate={{
            right: value ? 0 : switchHeight,
            left: value ? switchHeight : 0,
          }}
          transition={{
            type: "timing",
            duration: 300,
            easing: Easing.easing,
          }}
          style={{
            position: "absolute",
            width: itemSize,
            height: itemSize,
            margin: internalMargin,
            borderRadius: 25,
            backgroundColor: Palette.white,
          }}
        />
      </LinearGradient>
    </Pressable>
  );
};
