// Create your own company theme
// .storybook/IngrooivesTheme.js

// import the create funciton from storybook theming
import { create } from "@storybook/theming";
import IngroovesLogo from "../src/assets/images/Ingrooves-MG-Blk.png";

export default create({
    base: "light",
    brandTitle: "Ingrooves | Register",
    brandUrl: "",
    brandImage: IngroovesLogo,
});

import React from "react";
import { ComponentStory } from "@storybook/react";

import AreYouSure from "../../../assets/images/are_you_sure.svg";
import Construction from "../../../assets/images/construction.svg";
import Disco from "../../../assets/images/disco.svg";
import Error from "../../../assets/images/error.svg";
import HelpfulHint from "../../../assets/images/helpful_hint.svg";
import LargeDownload from "../../../assets/images/large_download.svg";
import NothingFound from "../../../assets/images/nothing_found.svg";
import PaperAirplane from "../../../assets/images/paper_airplane.svg";
import Party from "../../../assets/images/party.svg";

import { NotificationModal } from "./NotificationModal";

const NotificationModalStory = {
    title: "Shared/Notification Modal",
    component: NotificationModal,
    argTypes: {
        title: "Test Title",
        htmlSubtitle: "",
        svgImage: {
            options: [
                AreYouSure,
                Construction,
                Disco,
                Error,
                HelpfulHint,
                LargeDownload,
                NothingFound,
                PaperAirplane,
                Party,
            ],
            control: { type: "select" },
        },
        htmlBody: "",
        buttonText: "",
        showCancelButton: true,
    },
};

const Template: ComponentStory<typeof NotificationModal> =
  (args) => <NotificationModal {...args} />;

export const TitleAndImage = Template.bind({});
TitleAndImage.args = {
    title: "Title with image",
    htmlSubtitle: "",
    svgImage: "",
    htmlBody: "",
    buttonText: "",
    showCancelButton: false,
};

export const AllTextAndImage = Template.bind({});
AllTextAndImage.args = {
    title: "Title Text",
    htmlSubtitle: "Subtitle text",
    svgImage: "",
    htmlBody: "Body Text",
    buttonText: "Button Text",
    showCancelButton: true,
};

export default NotificationModalStory;