import React, { useEffect, useState } from "react";
import {
  Button,
  Dialog,
  View,
  Text,
  TextField,
  TouchableOpacity,
} from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import RemindersIcon from "@/assets/svgs/RemindersIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";

const MoveBrainDump = (props: {
  item: IBrainDump;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}) => {
  const { updateBrainDumpItem, deleteBrainDump } = useBrainDumpContext();
  const [description, setDescription] = useState<string>(
    props.item.description
  );

  useEffect(() => {
    updateBrainDumpItem(props.item.id, { description: description });
  }, [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={() => <CloseXIcon />}
          onPress={() => {
            props.setIsVisible(false);
          }}
        />
        <Button
          style={styles.topBtn}
          iconSource={() => <DropModalIcon />}
          onPress={() => {
            props.setIsVisible(false);
          }}
        />
        <View row>
          <Button
            style={styles.topBtn}
            iconSource={() => <PenIcon />}
            onPress={() => {
              console.log("selview");
              props.setIsVisible(false);
            }}
          />
          <Button
            style={styles.topBtn}
            marginL-5
            iconSource={() => <BinIcon />}
            onPress={() => {
              deleteBrainDump(props.item.id);
              props.setIsVisible(false);
            }}
          />
        </View>
      </View>
      <View centerH>
        <Text text60R>{props.item.title} </Text>
      </View>
      <View style={styles.divider} />
      <View row marginL-10 gap-5>
        <View paddingT-8>
          <MenuIcon width={20} height={12} />
        </View>
        <TextField
          textAlignVertical="top"
          multiline
          placeholder="Add description"
          numberOfLines={3}
          value={description}
          onChangeText={(value) => {
            setDescription(value);
          }}
        />
      </View>
      <View style={styles.divider} />
      <View gap-20 paddingH-10>
        <TouchableOpacity>
          <View row centerV>
            <NavToDosIcon
              width={22}
              color={"#919191"}
              style={styles.optionsIcon}
            />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my to do's</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View row centerV>
            <NavCalendarIcon
              width={22}
              height={22}
              color={"#919191"}
              style={styles.optionsIcon}
            />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my calendar</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View row centerV>
            <RemindersIcon width={22} style={styles.optionsIcon} />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my reminders</Text>
          </View>
        </TouchableOpacity>
      </View>
    </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,
  },
  optionsReg: {
    fontSize: 16,
    fontFamily: "PlusJakartaSans_400Regular",
  },
  optionsBold: {
    fontSize: 16,
    fontFamily: "PlusJakartaSans_600SemiBold",
  },
  optionsIcon: {
    marginRight: 10,
  },
});

export default MoveBrainDump;