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

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

export default ({ value, setValue, containerStyle = {} }) => {
  const currentColor = value ? Palette.green : Palette.red;

  const switchHeight = 28;
  const borderWidth = 2;
  const internalMargin = 2;

  const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2;

  return (
    <Pressable
      onPress={() => setValue(!value)}
      style={{
        flexDirection: "row",
        width: switchHeight * 2,
        height: switchHeight,
        borderColor: currentColor,
        borderWidth: borderWidth,
        borderRadius: 25,
        ...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: currentColor,
        }}
      />
    </Pressable>
  );
};
