import { Navigation } from "./index";
import type { Meta, StoryObj } from "@storybook/react";
import { DocsPage } from "@shared/stories/DocsTemplate";

import {
  PRIMARY_LINKS,
  UTILITY_LINKS,
  ACCOUNT_LINKS,
  SUPPORT_LINKS,
} from "./Navigation.stories.mocks";

const searchFormStyle = `
  form[name="searchForm"] {
    border-radius: 9999px !important;
    background: #ffffff;
    border-color: #d1d5db;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
  }
  [aria-label="Cart"] .material-symbols-rounded,
  [aria-label="cart"] .material-symbols-rounded {
    font-size: 0 !important;
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  [aria-label="Cart"] .material-symbols-rounded::before,
  [aria-label="cart"] .material-symbols-rounded::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-3-79.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z' fill='%2300002d'/%3E%3C/svg%3E");
    display: block;
  }
`;

const meta: Meta<typeof Navigation> = {
  title: "Contentful Blocks/Navigation",
  component: Navigation,
  tags: ["autodocs"],
  decorators: [
    (Story) => (
      <>
        <style>{searchFormStyle}</style>
        <Story />
      </>
    ),
  ],

  parameters: {
    docs: {
      page: DocsPage,
      description: {
        component:
          "Navigation component that includes utility navigation, main navigation, support/account links, search, and mobile drawer.",
      },
    },
  },

  args: {
    primaryNavigationLinks: PRIMARY_LINKS,
    primaryNavigationLogo: undefined,

    utilityNavigationLinks: UTILITY_LINKS,
    accountNavigationLinks: ACCOUNT_LINKS,
    supportNavigationLinks: SUPPORT_LINKS,

    displayUtilityNavigation: true,
    displaySearchBar: true,
    displayCallNowCta: true,

    showCallButton: true,
    showMobileSliderMenu: true,

    cartHref: "#",
    displayCartIcon: true,

    searchBarIcon: {
      url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%239CA3AF'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E",
    },

    invocaPhoneNumberDisplayText: "1-855-654-0841",
    callNowCtaText: "Call now:",
    utilityNavActiveIndex: 0,

  },

  argTypes: {
    displayUtilityNavigation: { control: "boolean" },
    displaySearchBar: { control: "boolean" },
    displayCallNowCta: { control: "boolean" },

    navigationBackgroundColor: { control: "text" },
    navigationLinkColor: { control: "text" },

    cartHasRetention: { control: "boolean" },

    onSearch: { action: "search triggered" },
    onCartClick: { action: "cart clicked" },
    onCallClickDesktop: { action: "call desktop" },
    onCallClickMobile: { action: "call mobile" },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;



/* DEFAULT (ALL FEATURES) */
export const Default: Story = {};



/* WITHOUT UTILITY NAV */
export const WithoutUtilityNavigation: Story = {
  args: {
    displayUtilityNavigation: false,
  },
};



/* WITHOUT SEARCH */
export const WithoutSearchBar: Story = {
  args: {
    displaySearchBar: false,
  },
};



/* WITHOUT CALL CTA */
export const WithoutCallCTA: Story = {
  args: {
    displayCallNowCta: false,
  },
};



/* CART RETENTION DOT */
export const WithCartRetentionDot: Story = {
  args: {
    cartHasRetention: true,
  },
};



/* CUSTOM BACKGROUND */
export const CustomBackgroundColor: Story = {
  args: {
    navigationBackgroundColor: "bg-blue-500",
  },
};



/* CUSTOM LINK COLOR */
export const CustomLinkColor: Story = {
  args: {
    navigationLinkColor: "text-red-500",
  },
};


/* MOBILE VIEW */
export const MobileView: Story = {
  parameters: {
    viewport: {
      defaultViewport: "mobile1",
    },
  },
};