import { FolderType } from "@openchat/types"
import { useFolders } from "@openchat/ui"
import React, { useEffect, useState } from "react"
import { TouchableOpacity, View } from "react-native"
import { StyledText } from "../../../ui-components/styled-text/styled-text"
import {
  NestableDraggableFlatList,
  NestableScrollContainer,
  RenderItemParams,
} from "react-native-draggable-flatlist"
import { AppConfig } from "../../../app/app.config"
import { AppController } from "../../../app/app.globals"
import { NavigationRef } from "../../../navigation/navigation.hooks"
import { Button } from "../../../ui-components/button/button.component"
import { Icon } from "../../../ui-components/icon/icon.component"
import { StickyHeader } from "../../../ui-components/sticky-header/sticky-header.component"
import { TemplateText } from "../../../ui-components/template-text/template-text.component"
import { FolderMangePopup } from "./folder-manage-popup"
import { useStyles } from "./folder-manage-style"
import { StickyFooter } from "../../../ui-components/sticky-footer/sticky-footer.component"
import { MenuOpener } from "../../../ui-components/menu/menu-opener.provider"

export const FolderManage = () => {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const styles = useStyles()
  const folders = useFolders()
  // const [reorderedFolders, setReorderedFolders] = useState<FolderType[]>([])
  // const [folder, setFolder] = useState<FolderType[]>(folders)

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  // useEffect(() => {
  //   setFolder(folders)
  // }, [folder])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  const renderItem = ({
    item,
    drag,
    isActive,
  }: RenderItemParams<FolderType>) => (
    <View style={styles.folder}>
      <View style={{ flexDirection: "row", gap: 10, alignItems: "center" }}>
        <TouchableOpacity
          onLongPress={() => {
            drag()
          }}
        >
          {isActive ? (
            <Icon name="fa-solid fa-grid-round" size={18} fill="#8592AA" />
          ) : (
            <Icon
              name="fa-sharp fa-light fa-grip-lines"
              size={18}
              fill="#8592AA"
            />
          )}
        </TouchableOpacity>
        <View style={styles.folderContent}>
          <StyledText style={styles.folderName}>{item.name}</StyledText>
        </View>
      </View>

      <MenuOpener content={<FolderMangePopup folder={item} />}>
        <Icon
          name="fa-regular fa-ellipsis-vertical"
          size={18}
          fill={"#8592AA"}
        />
      </MenuOpener>
    </View>
  )

  // ---------------------------------------------------------------------------
  return (
    <View
      style={AppConfig.isTablet ? styles.tabletContainer : styles.container}
    >
      <StickyHeader
        goBack={true}
        background="pattern"
        type="modal"
        title="Manage Folders"
        onPress={() => NavigationRef.goBack()}
        header={<StyledText style={styles.title}>Manage Folders</StyledText>}
      >
        <View style={styles.content}>
          <StyledText style={styles.desc}>
            Create folders for different groups of chats and quickly switch
            between them
          </StyledText>

          {/* --------------------------------------------------------------------------- */}
          {/* FOLDER LIST */}
          {/* --------------------------------------------------------------------------- */}

          {folders.length > 0 && (
            <View style={{ marginTop: 20 }}>
              <NestableScrollContainer>
                <NestableDraggableFlatList
                  scrollEnabled={true}
                  data={folders}
                  renderItem={renderItem}
                  keyExtractor={(item) => item.id}
                  onDragEnd={async ({ data }) => {
                    await AppController.folder.reorder({
                      folderIds: data.map((folder) => folder.id),
                    })
                  }}
                />
              </NestableScrollContainer>
            </View>
          )}

          {/* --------------------------------------------------------------------------- */}
          {/* EMPTY LIST MESSAGE */}
          {/* --------------------------------------------------------------------------- */}

          {folders.length === 0 && (
            <View style={styles.emptyResult}>
              <TemplateText
                title="You don't have folders"
                description={
                  <StyledText>
                    Press
                    <TouchableOpacity
                      style={styles.addFolderWrapper}
                      onPress={() => NavigationRef.navigate("FolderUpsert", {})}
                    >
                      <StyledText style={styles.addFolderText}>
                        add folder
                      </StyledText>
                    </TouchableOpacity>
                    button to create a new folder.
                  </StyledText>
                }
                style={{ alignItems: "center" }}
              />
            </View>
          )}
        </View>
      </StickyHeader>

      {/* --------------------------------------------------------------------------- */}
      {/* FOOTER & BUTTON */}
      {/* --------------------------------------------------------------------------- */}

      <StickyFooter size="small" withLine>
        <Button
          containerStyle={styles.btnWrapper}
          type="outline"
          icon="folder"
          onPress={() => NavigationRef.navigate("FolderUpsert", {})}
        >
          Add folder
        </Button>
      </StickyFooter>
    </View>
  )
}
the issue drag and drop not working. How to fix it ?