import { useContext, useState } from "react";
import { Text, View } from "react-native";
import { AppContext, AppStyles, Constants } from "../../utils";
import { LinearGradient } from "expo-linear-gradient";
import { MyIconButton } from "../Button";
import MyIcon from "../Icon";

export default function Card({
  children,
  cardTopicText,
  cardBackgroundColor,
  disablePaddingBottom,
}) {
  const appContext = useContext(AppContext);

  const backgroundColor =
    cardBackgroundColor === undefined
      ? appContext.appTheme.card.backgroundColor
      : cardBackgroundColor;

  return (
    <View
      style={[
        {
          paddingTop: 10,
          paddingLeft: 10,
          paddingRight: 10,
        },
        !disablePaddingBottom && { paddingBottom: 10 },
      ]}
    >
      {cardTopicText !== undefined && (
        <Text
          style={{
            paddingLeft: 10,
            color: appContext.appTheme.colors.gray,
            paddingBottom: 6,
          }}
        >
          {cardTopicText}
        </Text>
      )}
      <View
        style={[
          {
            backgroundColor: backgroundColor,
            padding: 20,
          },
          AppStyles.Shadow,
          AppStyles.card,
        ]}
      >
        {children}
      </View>
    </View>
  );
}

export function MyNotifyCard({
  iconName,
  notifyTitle,
  notifyDescription,
  onClose,
}) {
  const [notifyVisible, setNotifyVisible] = useState(true);

  if (!notifyVisible) return null;

  return (
    <View
      style={[
        {
          marginTop: 10,
          marginLeft: 10,
          marginRight: 10,
        },
        AppStyles.card,
      ]}
    >
      <LinearGradient
        style={[
          {
            width: "100%",
            paddingTop: 20,
            paddingLeft: 10,
            paddingRight: 10,
            paddingBottom: 20,
          },
          AppStyles.card,
        ]}
        colors={Constants.gradients.red}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
      >
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-evenly",
            gap: 10,
          }}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <MyIcon name={iconName} color={"yellow"} size={36} />
          </View>

          <View style={{ width: "70%" }}>
            <Text
              style={[
                { color: "#fff", fontWeight: "bold" },
                AppStyles.typography16,
              ]}
            >
              {notifyTitle}
            </Text>

            <Text style={{ color: "#fff" }}>{notifyDescription}</Text>
          </View>

          <MyIconButton
            iconName="close"
            iconSize={24}
            iconColor={"#ddd"}
            onPress={() => {
              onClose();
              setNotifyVisible(false);
            }}
          />
        </View>
      </LinearGradient>
    </View>
  );
}
