import { Motion } from "@legendapp/motion";
import * as Haptics from "expo-haptics";
import { Text, View } from "react-native";

import { isDesktop, isMobile, isNative } from "../hooks/useLayoutType";
import { Fonts, Palette } from "../styles";
import Style, { gutters, mainBorderRadius } from "../styles/Style";

export default ({
  type = "primary",
  theme = "default", // "default" | "radioactiv"

  text,
  onPress = () => console.log("null"),
  isAbsoluteBottom = false,

  alternateAction = {},

  contentContainerStyle = {},
  containerStyle = {},

  textStyle = {},

  isMainDesktopPanel = false,
}) => {
  const buttonWidth = alternateAction?.text ? "49%" : "100%";

  return (
    <View
      style={{
        flexDirection: "row",
        justifyContent: alternateAction?.text ? "space-between" : "center",
        ...(isAbsoluteBottom
          ? {
              position: "absolute",
              bottom: gutters * (isMobile ? 2 : 1),
              alignItems: "flex-end",
              ...(isDesktop && !isMainDesktopPanel
                ? {
                    maxWidth: 600,
                    minWidth: 400,
                    alignSelf: "center",
                  }
                : {
                    right: gutters,
                    left: gutters,
                    alignSelf: "center",
                  }),
            }
          : {
              width: "100%",
            }),
        ...contentContainerStyle,
      }}
    >
      {alternateAction?.text && alternateAction?.onPress ? (
        <BaseButton
          type={"secondary"}
          theme={alternateAction?.theme || theme}
          text={alternateAction.text}
          onPress={alternateAction.onPress}
          textStyle={{
            ...(alternateAction?.textStyle || {}),
          }}
          containerStyle={{
            width: buttonWidth,
            ...(alternateAction?.containerStyle || {}),
          }}
        />
      ) : null}

      <BaseButton
        type={type}
        theme={theme}
        text={text}
        onPress={onPress}
        containerStyle={{
          width: buttonWidth,
          ...containerStyle,
        }}
        textStyle={{
          ...textStyle,
        }}
      />
    </View>
  );
};

export const BaseButton = ({
  type = "primary",
  theme = "default",
  text,
  onPress = () => console.log("null"),
  containerStyle = {},
  textStyle = {},
  hasShadow = false,
}) => {
  const primaryColor =
    theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
  const primaryTransparentColor =
    theme === "radioactiv"
      ? Palette.transparentRadioactivGreen
      : Palette.transparentPrimary;

  const textColor = type === "secondary" ? primaryColor : Palette.darkPurple;

  return (
    <Motion.Pressable
      whileTap={{ scale: 0.8 }}
      onPress={() => {
        if (isNative) {
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
        }
        onPress();
      }}
      style={{
        width: "100%",
        height: 50,
        marginTop: gutters / 2,
        ...Style.containerRow,
        ...Style.containerCenter,
        backgroundColor: primaryColor,
        borderRadius: mainBorderRadius,
        ...(type === "secondary"
          ? {
              backgroundColor: primaryTransparentColor,
            }
          : hasShadow
            ? { ...Style.defaultShadows }
            : {}),
        ...containerStyle,
      }}
    >
      <Text
        style={{
          ...Fonts({
            type: "default",
            color: textColor,
          }),
          ...textStyle,
        }}
      >
        {text}
      </Text>
    </Motion.Pressable>
  );
};