import { StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import {
  Button,
  ButtonSize,
  View,
  Text,
  ActionSheet,
  TextField,
  Dialog,
  Slider,
} from "react-native-ui-lib";
import { AntDesign } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";

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

  useEffect(() => {
    console.log(points);
  }, [points]);

  return (
    <LinearGradient
      colors={["transparent", "#f9f8f7"]}
      locations={[0, 0.5]}
      style={styles.gradient}
    >
      <View style={styles.buttonContainer}>
        <Button
          marginH-25
          size={ButtonSize.large}
          style={styles.button}
          onPress={() => setIsVisible(!isVisible)}
        >
          <AntDesign name="plus" size={24} color="white" />
          <Text white text60R marginL-10>
            Create new chore
          </Text>
        </Button>
      </View>
      <Dialog
        bottom={true}
        height={"90%"}
        panDirection={PanningDirectionsEnum.DOWN}
        onDismiss={() => setIsVisible(false)}
        containerStyle={{
          backgroundColor: "white",
          width: "100%",
          alignSelf: "stretch",
          padding: 0,
          margin: 0,
        }}
        visible={isVisible}
      >
        <TextField
          placeholder="Add chore title"
          placeholderTextColor="#2d2d30"
          text60R
          marginT-15
        />
        <View style={styles.divider} />
        <View marginH-30>
          <Slider
            value={points}
            onValueChange={(value) => setPoints(value)}
            minimumValue={0}
            step={10}
            maximumValue={100}
          />
          <View row spread>
            <Text>0</Text>
            <Text>50</Text>
            <Text>100</Text>
          </View>
        </View>
      </Dialog>
    </LinearGradient>
  );
};

export default AddChore;

const styles = StyleSheet.create({
  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
  gradient: {
    height: "25%",
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  buttonContainer: {
    position: "absolute",
    bottom: 25,
    width: "100%",
  },
  button: {
    backgroundColor: "rgb(253, 23, 117)",
    paddingVertical: 20,
  },
});