import { useEffect, useState } from "react";
import { craftTableFilterSettingsOptionsProps } from "../../types/table-options";
import {
  ColumnTabConfigProps,
  QuickTabConfigProps,
  SavedButtonErrorProps,
  SettingsDataProps,
  SortingConfigProps,
} from "../../types/filter-settings";

export function useCraftTableFilterSettings() {
  //states for the quick filter layout
  const [showListViewSettings, setShowListViewSettings] =
    useState<boolean>(false);

  const [settingsData, setSettingsData] = useState<SettingsDataProps>({
    // quick_tab: {
    //   attribute: "status",
    //   sorting: "asc",
    //   hide_list: ["active", "inactive", "pending"],
    //   show_list: [],
    //   isAllSelected: true,
    //   isCombineOther: false,
    // },
    // column: {
    //   isDefault: true,
    //   show_list: [
    //     {
    //       label: "Customer Name",
    //       value: "customer_name",
    //     },
    //     {
    //       label: "Customer ID",
    //       value: "customer_id",
    //     },
    //   ],
    //   hide_list: [
    //     {
    //       label: "Email",
    //       value: "email",
    //     },
    //     {
    //       label: "Phone",
    //       value: "phone",
    //     },
    //   ],
    //   tabs: [
    //     {
    //       tab_name: "Active",
    //       show_list: [
    //         {
    //           label: "Customer Name",
    //           value: "customer_name",
    //         },
    //         {
    //           label: "Status",
    //           value: "status",
    //         },
    //       ],
    //       hide_list: [
    //         {
    //           label: "Email",
    //           value: "email",
    //         },
    //       ],
    //     },
    //     {
    //       tab_name: "Inactive",
    //       show_list: [
    //         {
    //           label: "Customer ID",
    //           value: "customer_id",
    //         },
    //         {
    //           label: "Status",
    //           value: "status",
    //         },
    //       ],
    //       hide_list: [
    //         {
    //           label: "Phone",
    //           value: "phone",
    //         },
    //       ],
    //     },
    //     {
    //       tab_name: "Pending",
    //       show_list: [
    //         {
    //           label: "Customer Name",
    //           value: "customer_name",
    //         },
    //         {
    //           label: "Customer ID",
    //           value: "customer_id",
    //         },
    //       ],
    //       hide_list: [
    //         {
    //           label: "Email",
    //           value: "email",
    //         },
    //         {
    //           label: "Phone",
    //           value: "phone",
    //         },
    //       ],
    //     },
    //   ],
    // },
    // sorting: {
    //   isDefault: true,
    //   sortby: [
    //     {
    //       column: "customer_id",
    //       order: "asc",
    //     },
    //   ],
    //   tabs: [
    //     {
    //       tab_name: "active",
    //       sortby: [
    //         {
    //           column: "customer_name",
    //           order: "asc",
    //         },
    //       ],
    //     },
    //     {
    //       tab_name: "inactive",
    //       sortby: [
    //         {
    //           column: "customer_id",
    //           order: "desc",
    //         },
    //       ],
    //     },
    //     {
    //       tab_name: "pending",
    //       sortby: [
    //         {
    //           column: "status",
    //           order: "asc",
    //         },
    //       ],
    //     },
    //   ],
    // },
  });

  // Quick FIlter settings local states

  const [quickTabStates, setQuickTabStates] = useState<QuickTabConfigProps>({});
  const [columnTabState, setColumnTabState] = useState<ColumnTabConfigProps>(
    {}
  );
  const [sortingTabState, setSortingTabState] = useState<SortingConfigProps>(
    {}
  );

  // This state will be used for settings validation
  const [saveButtonError, setSaveButtonError] = useState<SavedButtonErrorProps>(
    { hasError: false, messages: [] }
  );

  useEffect(() => {
    if (settingsData?.quick_tab) {
      setQuickTabStates(settingsData?.quick_tab);
    }
    if (settingsData?.column) {
      setColumnTabState(settingsData?.column);
    }
    if (settingsData?.sorting) {
      setSortingTabState(settingsData?.sorting);
    }
  }, [settingsData]);

  const craftTableFilterSettingsOptions: craftTableFilterSettingsOptionsProps =
    {
      settingsData: settingsData,
      setSettingsData: setSettingsData,
      showListViewSettings: showListViewSettings,
      setShowListViewSettings: setShowListViewSettings,
      quickTabStates: quickTabStates,
      setQuickTabStates: setQuickTabStates,
      columnTabState: columnTabState,
      setColumnTabState: setColumnTabState,
      sortingTabState: sortingTabState,
      setSortingTabState: setSortingTabState,
      saveButtonError: saveButtonError,
      setSaveButtonError: setSaveButtonError,
    };

  return craftTableFilterSettingsOptions;
}