import { Dimensions, StyleSheet } from "react-native";
import React, { useState } from "react";
import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
import { AntDesign } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import AddChoreDialog from "./AddChoreDialog";
import PlusIcon from "@/assets/svgs/PlusIcon";

const AddChore = () => {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  return (
    <View
      row
      spread
      paddingH-20
      style={{
        position: "absolute",
        bottom: 15,
        width: "100%",
      }}
    >
      <View style={styles.buttonContainer}>
        <Button
          marginH-20
          size={ButtonSize.large}
          style={styles.button}
          onPress={() => setIsVisible(!isVisible)}
        >
          <PlusIcon />
          <Text
            white
            style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
            marginL-5
          >
            Create new to do
          </Text>
        </Button>
      </View>
      {isVisible && (
        <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
      )}
    </View>
  );
};

export default AddChore;

const styles = StyleSheet.create({
  gradient: {
    height: 150,
    position: "absolute",
    bottom: 0,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  buttonContainer: {
    width: "100%",
    alignItems: "center",
  },
  button: {
    backgroundColor: "rgb(253, 23, 117)",
    height: 53.26,
    borderRadius: 30,
    width: 335,
  },
});