import {
  Alert,
  Box,
  Button,
  Grid,
  IconButton,
  Typography,
} from "@mui/material";
import CustomSearch from "../../filter/components/search/index.tsx";
import {
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { useDroppable } from "@dnd-kit/core";
import DraggableListItem from "./draggable-listitem.tsx";
import { listingValuesStyles } from "../style.ts";
import Loader from "../../common/loader/loader.tsx";
import { ClosedEyeIcon, EyeIcon } from "../../../../assets/svg.tsx";
import React from "react";
``;

interface FilterValue {
  label: string;
  value: string;
}

interface ListingValuesProps {
  filteredValues: FilterValue[];
  buttonText: string;
  onClick: () => void;
  headerText: string;
  searchTerm?: string;
  setSearchTerm?: React.Dispatch<React.SetStateAction<string>>;
  containerId: string;
  tabsApiDataLoading?: boolean;
  onItemToggle: (
    item: { label: string; value: string },
    fromContainerId: string
  ) => void;
  enableDragAndDrop?: boolean;
  isQuickTabActive?: boolean;
  AlertComponenet?: React.ReactNode;
}

const ListingValuesContent = ({
  item,
  containerId,
  onItemToggle,
}: {
  item: FilterValue;
  containerId: string;
  onItemToggle: (
    item: { label: string; value: string },
    fromContainerId: string
  ) => void;
}) => {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 1,
        flex: 1,
        color: containerId === "tabs" ? "black" : "#9e9d9b",
      }}
    >
      <Typography>{item.label}</Typography>
      <IconButton size="small" onClick={() => onItemToggle(item, containerId)}>
        {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
      </IconButton>
    </Box>
  );
};

const ListingValues = ({
  filteredValues,
  buttonText,
  onClick,
  headerText,
  searchTerm,
  setSearchTerm,
  containerId,
  tabsApiDataLoading,
  onItemToggle,
  enableDragAndDrop = true,
  AlertComponenet,
}: ListingValuesProps) => {
  const { setNodeRef } = useDroppable({
    id: containerId,
    data: {
      type: "container",
      containerId: containerId,
    },
  });

  return (
    <Grid size={6} sx={listingValuesStyles.wrapper}>
      {tabsApiDataLoading ? (
        <Loader />
      ) : (
        <>
          <Box
            sx={{
              p: 2,
              // border: "1px solid #1a191934",
              backgroundColor: "#fdfdfc",
              borderRadius: "12px",
              top: 2,
              // height: "100%",
            }}
          >
            <Box sx={listingValuesStyles.headerContainer}>
              <Typography variant="h6" sx={listingValuesStyles.heading}>
                {headerText}
              </Typography>
              <Button
                onClick={onClick}
                variant="text"
                size="small"
                sx={listingValuesStyles.button}
                disabled={filteredValues.length === 0}
              >
                {buttonText}
              </Button>
            </Box>

            {searchTerm !== undefined && setSearchTerm !== undefined && (
              <CustomSearch value={searchTerm} onChange={setSearchTerm} />
            )}

            <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
              {enableDragAndDrop ? (
                <SortableContext
                  items={filteredValues.map((item) => item.value)}
                  strategy={verticalListSortingStrategy}
                >
                  <Box sx={listingValuesStyles.draggableCover}>
                    {filteredValues.map((item) => (
                      <DraggableListItem
                        key={item.value}
                        id={item.value}
                        containerId={containerId}
                      >
                        <ListingValuesContent
                          item={item}
                          containerId={containerId}
                          onItemToggle={onItemToggle}
                        />
                      </DraggableListItem>
                    ))}
                  </Box>
                </SortableContext>
              ) : (
                <Box sx={listingValuesStyles.draggableCover}>
                  {filteredValues?.length > 0 &&
                    filteredValues.map((item) => (
                      <ListingValuesContent
                        key={item.value}
                        item={item}
                        containerId={containerId}
                        onItemToggle={onItemToggle}
                      />
                    ))}
                </Box>
              )}
            </Box>
          </Box>
          {AlertComponenet && AlertComponenet}
        </>
      )}
    </Grid>
  );
};

export default ListingValues;