import { Theme } from "@/constant";
import { Meta } from "@storybook/react";
import Tomo from "../../assets/images/tomo_icon.svg";
import { ConnectedModal } from "./index";

const story: Meta = {
  title: "Components/ConnectedModal",
  component: ConnectedModal,
  argTypes: {
    theme: {
      control: "radio",
      options: Object.values(Theme),
    },
  },
  decorators: [
    (Story) => (
      <div>
        <Story />
      </div>
    ),
  ],
};

export default story;

const Template: any = (args: any) => (
  <ConnectedModal {...args}> </ConnectedModal>
);

const TomoIcon = () => (
  <img className="uikit-w-[48px] uikit-h-[48px]" src={Tomo} alt="" />
);
export const Primary = Template.bind({});
Primary.args = {
  opened: true,
  onClose: () => {
    console.log("ConnectedModal.close");
  },
  title: "Connected Modal",
  close: true,
  theme: Theme.LIGHT,

  selectedNetwork: {
    id: 59144,
    name: "Linea Mainnet",
    logo: "/src/assets/img/chain/Linea.svg",
  },
  networkOptions: [
    {
      id: 1,
      name: "Ethereum",
      logo: "/src/assets/img/chain/Ethereum.svg",
    },
    {
      id: 59144,
      name: "Linea Mainnet",
      logo: "/src/assets/img/chain/Linea.svg",
    },
  ],
  accountInfo: {
    address: "0x9d0D23a6341Bb19F048436b02dFF49e92440081e",
    name: "MetaMask",
    icon: <TomoIcon />,
  },
  onLogout: () => {
    console.log("ConnectedModal.logout");
  },
};