sample1

type ComponentState = {
  provider: ProviderKind | undefined;
  kinds: ResourceKind[];
};

const useComponentState = (initial?: {
  provider: ProviderKind;
  kinds: ResourceKind[];
}) => {
  return useMultiQueryParameterState<ComponentState>()(
    ["rkind", "rprovider"] as const,
    { provider: undefined, kinds: [] },
    (v) => {
      const rkinds = (() => {
        if (initial?.kinds != null) {
          return initial.kinds.filter(isResourceKind);
        }

        if (typeof v.rkind === "string") {
          return [v.rkind].filter(isResourceKind);
        } else if (v.rkind != null) {
          return v.rkind.filter(isResourceKind);
        } else {
          return [];
        }
      })();
      const rprovider = (() => {
        if (initial?.provider != null) {
          return initial.provider;
        }

        if (typeof v.rprovider === "string" && isProviderKind(v.rprovider)) {
          return v.rprovider;
        } else {
          return undefined;
        }
      })();

      return {
        kinds: rkinds,
        provider: rprovider,
      };
    },
    (v) => {
      return {
        rkind: v.kinds,
        rprovider: v.provider || [],
      };
    },
  );
};