import { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Tabs from "../components/Tab/Tab";
import SettingCard from "../components/SettingCard/SettingCard";
import { ShieldExclamationIcon, MapPinIcon } from "@heroicons/react/24/outline";
import { useModalStore } from "../context/zustand-store/appStore";
import { CooperativesSettingsTable } from "../partials/units/CooperativesSettingsTable";

const tabItems = [
  { label: "اتحادیه ها", visible: false },
  { label: "تعاونی ها" },
];

export default function SettingsOfUnits() {
  const { openModal } = useModalStore();
  const [selectedTab, setSelectedTab] = useState<number>(0);
  const handleTabChange = (index: number) => {
    setSelectedTab(index);
  };

  return (
    <Grid container column className="gap-2">
      <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
      <Grid container column className="mt-2">
        {selectedTab === 1 && (
          <div className="w-full">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              <SettingCard
                title="محدودیت دریافت نهاده"
                description="تنظیم و مدیریت محدودیت‌های دریافت نهاده برای تعاونی‌ها"
                icon={ShieldExclamationIcon}
                onClick={() => {
                  openModal({
                    title: "محدودیت دریافت نهاده تعاونی ها",
                    content: (
                      <CooperativesSettingsTable settingsType="purchase_policy" />
                    ),
                    isFullSize: true,
                  });
                }}
              />
              <SettingCard
                title="محدوده فعالیت تعاونی ها"
                description="تعریف و مدیریت محدوده جغرافیایی فعالیت تعاونی‌ها"
                icon={MapPinIcon}
                onClick={() => {
                  openModal({
                    title: "محدوده فعالیت تعاونی ها",
                    content: (
                      <CooperativesSettingsTable settingsType="service_area" />
                    ),
                    isFullSize: true,
                  });
                }}
              />
            </div>
          </div>
        )}
      </Grid>
    </Grid>
  );
}
