import uniqBy from 'lodash/uniqBy';
import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
import { useLocalStorage } from 'react-use';
import { findKey } from '../utils/findKey';

import { ApolloColumnType, ColumnSettingType } from '../interfaces';

export function useColumnSettingsStorage<T>(
  id: string,
  columns: ApolloColumnType<T>[],
): [ColumnSettingType[], Dispatch<SetStateAction<ColumnSettingType[]>>] {
  const key = useMemo(() => `apollo-table:column-settings:${id}`, [id]);

  const [localStorageValue, setLocalStorageValue] = useLocalStorage<ColumnSettingType[]>(key, []);

  const columnSettings = useMemo((): ColumnSettingType[] => {
    // 重置后的配置
    const initSetting = columns.map(
      (column): ColumnSettingType => ({
        key: findKey(column),
        hidden: !!column.hidden,
        fixed: column?.fixed || false,
      }),
    );

    // 增加或删除，直接重置更新
    if (localStorageValue?.length !== columns.length) {
      return initSetting;
    }

    let isConfigChanged = false;

    // 判断代码的 key 是否更新
    // eslint-disable-next-line no-restricted-syntax
    for (const value of localStorageValue) {
      if (!columns.find((column): boolean => findKey(column) === value.key)) {
        isConfigChanged = true;
        break;
      }
    }

    if (isConfigChanged) {
      return initSetting;
    }

    return uniqBy([...localStorageValue, ...initSetting], 'key').filter(
      (columnSetting): boolean =>
        !!columns.find((column): boolean => findKey(column) === columnSetting.key),
    );
  }, [columns, localStorageValue]);

  return [
    columnSettings,
    useCallback(
      value => {
        setLocalStorageValue(value);
      },
      [setLocalStorageValue],
    ),
  ];
}