import React, { useState } from "react";
import { Button, Dialog, View, Text, TextField } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { IBrainDump } from "@/contexts/DumpContext";
import { Entypo, EvilIcons, Feather, Octicons } from "@expo/vector-icons";
import { TouchableOpacity } from "react-native-gesture-handler";

const MoveBrainDump = (props: {
  item: IBrainDump;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}) => {
  const [description, setDescription] = useState<string>(
    props.item.description
  );
  return (
    <Dialog
      bottom={true}
      height={"90%"}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => props.setIsVisible(false)}
      containerStyle={{
        borderRadius: 10,
        backgroundColor: "white",
        width: "100%",
        alignSelf: "stretch",
        padding: 0,
        paddingTop: 3,
        margin: 0,
      }}
      visible={props.isVisible}
    >
      <View row spread paddingH-10 paddingV-15>
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          iconSource={() => <EvilIcons name="close" size={30} color="black" />}
          onPress={() => {
            props.setIsVisible(false);
          }}
        />
        <Button
          style={styles.topBtn}
          iconSource={() => (
            <Feather name="chevron-down" size={24} color="black" />
          )}
          onPress={() => {
            props.setIsVisible(false);
          }}
        />
        <View row>
          <Button
            style={styles.topBtn}
            iconSource={() => (
              <Octicons name="pencil" size={24} color="#919191" />
            )}
            onPress={() => {}}
          />
          <Button
            style={styles.topBtn}
            iconSource={() => (
              <EvilIcons name="trash" size={30} color="#919191" />
            )}
            onPress={() => {}}
          />
        </View>
      </View>
      <View centerH>
        <Text text60R>{props.item.title} </Text>
      </View>
      <View style={styles.divider} />
      <View row marginH-20>
        <Entypo
          name="text"
          size={24}
          color="black"
          style={{ marginBottom: "auto" }}
        />
        <TextField
          textAlignVertical="top"
          multiline
          placeholder="Add description"
          numberOfLines={3}
          value={description}
          onChangeText={(value) => {
            setDescription(value);
          }}
        />
      </View>
      <View style={styles.divider} />
    </Dialog>
  );
};

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,
  },
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  rotateSwitch: {
    marginLeft: 35,
    marginBottom: 10,
    marginTop: 25,
  },
});

export default MoveBrainDump;