//Helper Libraries
import { entityLoadConfigurationFromOptions } from "@/lib/data/dataHelpers";
import type { IModuleProps } from "@/lib/types";
import { useEffect, useMemo, useState } from "react";

//Sets the property and value that will be received. In this case you can send any property value as long as it is a string.
export type ClientExampleConfig = {
  propertyName: string;
};

export default ({ createClient, config, options }: IModuleProps<ClientExampleConfig>) => {
  const [propertyValue, setPropertyValue] = useState<string>();

//The createClient is provided by the Content Hub to communicate with the component.
  const client = useMemo(createClient, [createClient]);

//This code will only load the configured property. Important not to load everything for better performance.
  const loadConfiguration = useMemo(() => entityLoadConfigurationFromOptions({ properties: [config.propertyName] }), [config.propertyName]);

//Fetches the entity. When the entity changes the model loads. Gets the property value and stores it in state.
  useEffect(() => {
    (async () => {
      if (!client || !loadConfiguration || !options.entityId) setPropertyValue(undefined);
      else {
        const entity = await client.entities.getAsync(options.entityId, loadConfiguration);
        setPropertyValue(entity?.getPropertyValue(config.propertyName) as string);
      }
    })();
  }, [client, options.entityId]);

//This displays the property value. This part should look somewhat familiar as it uses HTML.
  return (
    <dl>
      <dt>{config.propertyName}</dt>
      <dd>{propertyValue ? propertyValue : <em>Not set</em>}</dd>
    </dl>
  );
};

//Uses a helper library to create
import createModule from "@/lib/createModule"; 
//Imports the React component and adds the configuration type it expects.
import ClientExample, { ClientExampleConfig } from "./clientExample"; 

//These lines bring it all together to create the module.
export default createModule<ClientExampleConfig>(
props => <ClientExample {...props} />
 );

//Defines component story and variations.
import type { Meta, StoryObj } from "@storybook/react";
//Defines the configuration.
import ClientExample, { ClientExampleConfig } from "./clientExample";
//Helpers that simulate Content Hub behavior.
import { CreateMockEntity, CreateMockModuleProps, CreateMockQueryResponse, MockApiHandler, MockBaseUrl, MockEntityId, MockRoutes } from "@/lib/mockData";

//MSW = Mock Service Worker
//Intercepts HTTP calls in the browser and replace it with a mocked responses.
import { http, HttpResponse } from "msw";

//These can be set to whatever values you want to test.
const mockedPropertyName = "title";
const mockedPropertyValue = "Hello World!";

//Registers the story and supplies the default props.
const meta = {
  title: "Modules/Client Example",
  component: ClientExample,
  args: {
    ...CreateMockModuleProps<ClientExampleConfig>({ propertyName: mockedPropertyName }),
    options: {
      entityId: MockEntityId,
    },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof ClientExample>;

export default meta;
type Story = StoryObj<typeof meta>;

//Defines the story
export const Default: Story = {
  parameters: {
    msw: {
      handlers: [
        MockApiHandler,
        http.post(MockRoutes.entities_by_query.href, () => {
          const entity = CreateMockEntity({ [mockedPropertyName]: mockedPropertyValue });
          return HttpResponse.json(CreateMockQueryResponse([entity]));
        }),
      ],
    },
  },
  args: {},
};