import React, { useState } from "react";
import { fn } from "@storybook/test";
import { Notification as NotificationWrapper } from "../components/Notification";
import { Button } from "../components/Button";

// importing mockData
import {
  mockBadgeLists,
  mockNotificationTabs,
  mockNotificationPanels,
} from "../components/Notification/mockData";

export default {
  title: "Patterns/Notification",
  component: NotificationWrapper,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "The Notification component delivers important messages and updates to users, ensuring effective communication and interaction within the application. It helps users stay informed about important events, changes, or actions that require their attention.",
      },
    },
  },
  argTypes: {
    isOpen: {
      description: "If true, open Notification component.",
      table: {
        defaultValue: { summary: false },
        type: { summary: "boolean" },
      },
    },
    title: {
      description:
        "Title of the Notification Component. <br/>Note:- Please Provide in Capitalize text.",
      table: {
        type: { summary: "string" },
      },
    },
    handleClose: {
      description: "Function to handle the event when Notification closes.",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    setIsOpen: {
      description:
        "Function to handle the event when Notification open/closes.",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    setNotificationPanels: {
      description: "Function to handle the event when Notification updates.",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    anchor: {
      description: "Direction by which Notification will open",
      options: ["left", "right"],
      control: { type: "radio" },
      table: {
        defaultValue: { summary: "right" },
        type: { summary: "string" },
      },
    },
    notificationTabs: {
      description: `It is array object which contains Tab Lists of the Notification. 
      <code>
        <ul class="storybook-order-list">
          <li><strong>label</strong>: Label of the Notification Tab. [string]</li>
          <li><strong>value</strong>: Unique value of the Notification Tab. [string]</li>
        </ul>
        </code>
      `,
      control: {
        type: "array", // Control type (text, boolean, select, etc.)
      },
      table: {
        defaultValue: { summary: "[]" },
        type: { summary: "Array Object" },
      },
    },
    badgesList: {
      description: `It is array object which contains badges List of the Notification Badges.
      <code>
        <ul class="storybook-order-list">
          <li><strong>id?</strong>: Unique Id of the Object. [string | number]</li>
          <li><strong>value</strong>: Unique value of the Object <br/> corresponding with Tab Names. [string]</li>
          <li><strong>notificationList</strong>: Array Object consisting of <br/> Badges details. [Array Object]</li>
          <ul class="storybook-order-child-list">
              <li><strong>label</strong>: Label of the Badges. [string]</li>
              <li><strong>numberOfTypes</strong>: Total number of <br/>Badge's type. [string]</li>
              <li><strong>handleClick?</strong>: Handle onClick function on <br/>the Badge.[(badge) => {}][function]</li>
            </ul>
        </ul>
        </code>
      `,
      control: {
        type: "array", // Control type (text, boolean, select, etc.)
      },
      table: {
        defaultValue: { summary: "[]" },
        type: { summary: "Array Object" },
      },
    },
    notificationPanels: {
      description: `It is array object which contains List of the Notification of different Tab Panels.
      <code>
        <ul class="storybook-order-list">
          <li><strong>id?</strong>: Unique Id of the Object. [string | number]</li>
          <li><strong>value</strong>: Unique value of the Object corresponding with <br/> Tab Names. [string]</li>
          <li><strong>handleSettingClick?</strong>: Handle onClick function on the <br/> Setting Button. [function]</li>
          <li><strong>notificationLists</strong>: Array Object consisting of content <br/> of the Notification.[Array Object]</li>
            <ul class="storybook-order-child-list">
              <li><strong>selected</strong>: If true, selects the <br/> Notification List's Item.[boolean]</li>
              <li><strong>status</strong>: Different state of the Notification <br/> List's Item.[string]["success"|"fail"|"pending"]</li>
              <li><strong>read</strong>: If true, mark notification Read.[boolean]</li>
              <li><strong>label</strong>: Label of the Notification list. <br/>[string]</li>
              <li><strong>date</strong>: Date of the Notification list. <br/>[Moment Object]</li>
              <li><strong>time</strong>: Time of the Notification list. <br/>[Moment Object]</li>
              <li><strong>description</strong>: Description of the Notification list. <br/>[string]</li>
              <li><strong>handleSelectChange</strong>: Handle onChange function <br/> of the Notification list. 
              <br/>[(event, type, notificationPanels, <br/> setNotificationPanels, list) => {}] <br/>[function]</li>
              <li><strong>handleMarkCompleted</strong>: Handle onClick function on the <br/> "Mark as completed" of the Notification list. 
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>handleMoveToPending</strong>: Handle onClick function <br/>on the "Move to pending" of the Notification list. 
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>handleMarkAsRead</strong>: Handle onClick function <br/> on the "Mark as read" of the Notification list.
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>handleBookMark</strong>: Handle onClick function <br/>on the "BookMark Icon" of the Notification list.
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>handleDeleteNotification</strong>: Handle onClick function <br/> on the "Delete Icon" of the Notification list.
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>handleDownloadNotification</strong>: Handle onClick function <br/> on the "Download Icon" of the Notification list.
              <br/>[(type, notificationPanels, <br/> setNotificationPanels, list) => {}]<br/>[function]</li>
              <li><strong>checkBoxClick</strong>: Handle onClick function <br/> on the "Checkbox" of the Notification list.</li>
            </ul>
          </ul>
        </code>
      `,
      control: {
        type: "array", // Control type (text, boolean, select, etc.)
      },
      table: {
        defaultValue: { summary: "[]" },
        type: { summary: "Array Object" },
      },
    },
    displayFormat: {
      description:
        "Custom date format to display notification date (e.g., 'MM/DD/YYYY').",
      table: {
        defaultValue: { summary: "MM/DD/YYYY" },
        type: { summary: "string" },
      },
      control: {
        type: "text",
      },
    },
    primaryButtonLabel: {
      description:
        "Label of primary button, If not passed does not display primary button.",
      table: {
        defaultValue: { summary: "" },
        type: { summary: "string" },
      },
    },
    secondaryButtonLabel: {
      description:
        "Label of secondary button, If not passed does not display secondary button.",
      table: {
        defaultValue: { summary: "" },
        type: { summary: "string" },
      },
    },
    onPrimaryButtonClick: {
      description: "function to handle when user clicks on primary button",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    onSecondaryButtonClick: {
      description: "function to handle when user clicks on secondary button",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    onSettingButtonClick: {
      description: `function to handle when user clicks on <code>Setting & Help</code>`,
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    handleSelectAll: {
      description: `function to handle when user clicks on <code>Select All</code>`,
      table: {
        defaultValue: { summary: "(type, notificationList) => {}" },
        type: { summary: "function" },
      },
    },
    handleMarkReadAll: {
      description: `function to handle when user clicks on <code>Mark all as read</code>`,
      table: {
        defaultValue: { summary: "(type, notificationList) => {}" },
        type: { summary: "function" },
      },
    },
    handleMoveAllPending: {
      description: `function to handle when user clicks on <code>Move to pending</code>`,
      table: {
        defaultValue: { summary: "(type, notificationList) => {}" },
        type: { summary: "function" },
      },
    },
    handleNotificationDeleteAll: {
      description: `function to handle when user clicks on <code>Delete Icon.</code>`,
      table: {
        defaultValue: { summary: "(type, notificationList) => {}" },
        type: { summary: "function" },
      },
    },
    moveToPendingDropdownOptions: {
      description: "Options for the Move to Pending dropdown.",
      table: {
        type: { summary: "array" },
        defaultValue: { summary: null },
      },
      control: {
        type: "object",
      },
    },
    handleTabChange: {
      description: `function to handle when user changes the notification tab`,
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    activeNotiTab: {
      description: "holds the value of active notification tab",
      table: {
        type: { summary: "string" },
      },
    },
    onNotificationScrollToBottom: {
      description:
        "function to handle when user scrolls to bottom of the notification list",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    scrollThreshold: {
      description: "threshold for the notification list scroll",
      table: {
        defaultValue: { summary: "50" },
        type: { summary: "number" },
      },
    },
    isHoverOnCard: {
      description:
        "If true, notification action buttons (delete, bookmark, download) appear when hovering over the entire card. If false, buttons only appear when hovering over the label/header.",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
      control: {
        type: "boolean",
      },
    },
    isChipsExpandable: {
      description:
        "If true, all badge chips are always expanded and visible with the expand/collapse button hidden. If false, chips can be toggled with the expand/collapse button.",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
      control: {
        type: "boolean",
      },
    },
    isDeleteAlwaysVisible: {
      description:
        "If true, the delete button is always visible when handleDeleteNotification exists, without requiring hover. Other buttons (bookmark, download) still follow hover behavior. If false, all buttons follow normal hover behavior.",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
      control: {
        type: "boolean",
      },
    },
    isEmptyState: {
      description:
        "If true, the notification list is empty and no notifications are available.",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
      control: {
        type: "boolean",
      },
    },
    emptyStateTitle: {
      description: "Title of the empty state.",
      table: {
        defaultValue: { summary: "Everything looks quiet for now" },
        type: { summary: "string" },
      },
      control: {
        type: "text",
      },
    },
    emptyStateDescription: {
      description: "Description of the empty state.",
      table: {
        defaultValue: {
          summary: "We’ll notify you when something new comes up",
        },
        type: { summary: "string" },
      },
      control: {
        type: "text",
      },
    },
    customNotificationJsx: {
      description: "Custom JSX to display in the notification list.",
      table: {
        defaultValue: { summary: null },
        type: { summary: "React.ReactNode" },
      },
    },
  },
  args: {
    setIsOpen: fn(),
    setNotificationPanels: fn(),
    handleClose: fn(),
    onPrimaryButtonClick: fn(),
    onSecondaryButtonClick: fn(),
    onSettingButtonClick: fn(),
    handleSelectAll: fn(),
    handleMarkReadAll: fn(),
    handleMoveAllPending: fn(),
    handleNotificationDeleteAll: fn(),
    onNotificationScrollToBottom: fn(),
  },
};

const Notification = (args) => {
  const [open, setOpen] = useState(args.isOpen);
  const [notificationPanels, setNotificationPanels] = useState(
    args.notificationPanels
  );

  const handleLoadMoreNotifications = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        setNotificationPanels((prevPanels) =>
          prevPanels.map((panel) => {
            if (panel.value === "task-list") {
              const maxId = panel.notificationList.reduce(
                (max, item) => Math.max(max, item.id || 0),
                0
              );

              const newItems = Array.from({ length: 5 }).map((_, idx) => ({
                id: maxId + idx + 1,
                selected: false,
                status: "pending",
                read: false,
                badge: "New",
                handleSelectChange: (
                  type,
                  notificationPanels,
                  setNotificationPanels,
                  list
                ) => {
                  const obj = notificationPanels.map((types) => {
                    if (types.value === type) {
                      return {
                        ...types,
                        notificationList: types.notificationList.map((item) => {
                          if (item.id === list.id) {
                            return {
                              ...item,
                              selected: !item.selected,
                            };
                          } else {
                            return item;
                          }
                        }),
                      };
                    }
                    return types;
                  });

                  setNotificationPanels(obj);
                },
                label: `Report ${maxId + idx + 1} is ready to download`,
                date: new Date(),
                time: new Date().getTime(),
                description:
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
              }));

              return {
                ...panel,
                notificationList: [...panel.notificationList, ...newItems],
              };
            }
            return panel;
          })
        );

        resolve();
      }, 5000);
    });
  };

  return (
    <React.Fragment>
      <Button onClick={() => setOpen(!open)}>Click to open Notification</Button>
      <NotificationWrapper
        {...args}
        notificationPanels={notificationPanels}
        setNotificationPanels={setNotificationPanels}
        onNotificationScrollToBottom={handleLoadMoreNotifications}
        isOpen={open}
        setIsOpen={setOpen}
        handleClose={() => setOpen((prevOpen) => !prevOpen)}
        onSettingButtonClick={() =>
          console.log("onSettingButtonClick button clicked")
        }
        handleSelectAll={(type, notificationList) => {
          const updatedRes = notificationList.map((item) => {
            return {
              ...item,
              selected: true,
            };
          });

          const res = notificationPanels.map((item) => {
            if (item.value === type) {
              return {
                ...item,
                notificationList: updatedRes,
              };
            }
            return item;
          });
          setNotificationPanels([...res]);
        }}
        handleMarkReadAll={() =>
          console.log("handleMarkReadAll button clicked")
        }
        handleMoveAllPending={() =>
          console.log("handleMoveAllPending button clicked")
        }
        handleNotificationDelete={() =>
          console.log("handleNotificationDelete button clicked")
        }
      />
    </React.Fragment>
  );
};

export const Default = (args) => <Notification {...args} />;

Default.args = {
  title: "Notification",
  anchor: "right",
  isOpen: false,
  badgesList: mockBadgeLists,
  notificationTabs: mockNotificationTabs,
  notificationPanels: mockNotificationPanels,
  primaryButtonLabel: "Save",
  secondaryButtonLabel: "Clear all",
  moveToPendingDropdownOptions: [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" },
  ],
  activeNotiTab: "",
  onNotificationScrollToBottom: () => {},
  scrollThreshold: 50,
  debounceTime: 5000,
  isWithSearch: false,
  isHoverOnCard: false,
  isChipsExpandable: false,
  isDeleteAlwaysVisible: false,
};
