import { useEffect, useState } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { parseFqdn, TagsWidgetState } from '@wix/bex-core';
import { useWidgetForm } from './useWidgetForm';

export interface UseTagsWidgetParams {
  fqdn: string;
  origin?: string;
  fieldName?: string;
}

export const useTagsWidget = ({
  fqdn,
  origin = 'tags_widget',
}: UseTagsWidgetParams) => {
  const container = useWixPatternsContainer();

  const [state] = useState(
    () =>
      new TagsWidgetState({
        container,
        fqdn: parseFqdn(fqdn),
        origin,
      }),
  );

  useEffect(() => state.init(), []);

  return state;
};

export interface UseTagsWidgetInternalParams {
  fqdn?: string;
  origin?: string;
  fieldName?: string;
  externalState?: TagsWidgetState;
}

export const useTagsWidgetInternal = ({
  fqdn,
  origin = 'tags_widget',
  fieldName = 'tags',
  externalState,
}: UseTagsWidgetInternalParams) => {
  const container = useWixPatternsContainer();
  const widgetForm = useWidgetForm();

  const [{ state }] = useState(() => {
    const finalState =
      externalState ??
      new TagsWidgetState({
        container,
        fqdn: parseFqdn(fqdn ?? ''),
        origin,
      });

    widgetForm?.registerWidget(fieldName, finalState);

    return {
      state: finalState,
    };
  });

  useEffect(() => state.init(), []);

  return state;
};