"use client";
import { NotificationChannelWith } from "@/db/schema/09_notification-channel";
import { CardsWithPagination } from "@/components/common/cards-with-pagination";
import { useState } from "react";
import { EmptyStatePlaceholder } from "@/components/common/empty-state-placeholder";
import { OrganizationWithMembers } from "@/db/schema/03_organization";
import { StorageChannelWith } from "@/db/schema/12_storage-channel";
import { ChannelCard } from "@/features/channel/channel-card";
import { ChannelAddEditModal } from "@/features/channel/channel-add-edit-modal";
import {
  ChannelKind,
  getChannelTextBasedOnKind,
} from "@/features/channel/channels-helpers";

type ChannelsSectionProps = {
  channels: NotificationChannelWith[] | StorageChannelWith[];
  organizations: OrganizationWithMembers[];
  kind: ChannelKind;
  defaultStorageChannelId?: string | null | undefined;
};

export const ChannelsSection = ({
  organizations,
  channels,
  kind,
  defaultStorageChannelId,
}: ChannelsSectionProps) => {
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const channelText = getChannelTextBasedOnKind(kind);
  const hasChannels = channels.length > 0;

  return (
    <div className="h-full">
      <ChannelAddEditModal
        kind={kind}
        open={isAddModalOpen}
        onOpenChangeAction={setIsAddModalOpen}
        adminView={false}
        trigger={false}
      />
      {hasChannels ? (
        <div className="h-full">
          <CardsWithPagination
            data={channels}
            cardItem={ChannelCard}
            cardsPerPage={8}
            numberOfColumns={2}
            adminView={true}
            organizations={organizations}
            kind={kind}
            defaultStorageChannelId={defaultStorageChannelId}
          />
        </div>
      ) : (
        <EmptyStatePlaceholder
          text={`No ${channelText} channels configured yet`}
          onClick={() => {
            setIsAddModalOpen(true);
          }}
          className="h-full"
        />
      )}
    </div>
  );
};
