import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { AddressLookup, type AddressLookupProps } from ".";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import { Text } from "../Text";
import { MockLoqateAddressLookupService } from "./__mocks__/LoqateAddressLookupService";

type StoryType = StoryObj<typeof AddressLookup>;

const meta: Meta<typeof AddressLookup> = {
  title: "Forms/AddressLookup",
  component: AddressLookup,
  argTypes: {
    type: {
      options: [],
    },
    ...excludeControls("icon"), // options
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

const addressLookupService = new MockLoqateAddressLookupService({
  baseUrl: "https://www.example.com/",
  apiKey: "test",
});

const AddressLookupWrapper = (args: AddressLookupProps) => {
  const [address, setAddress] = useState(null);
  const handleAddressSelected = (selected: any) => {
    setAddress(selected);
  };

  return (
    <>
      <AddressLookup
        {...args}
        onAddressSelected={handleAddressSelected}
        addressLookupService={addressLookupService}
      />
      <Text>Address:</Text>
      <pre>{JSON.stringify(address, null, 2)}</pre>
    </>
  );
};

export const Default: StoryType = {
  render: (args: AddressLookupProps) => <AddressLookupWrapper {...args} />,
  args: {
    label: "Address search",
    addressLookupService,
  },
};

export default meta;
