import { faker } from "@faker-js/faker"
import { Meta, StoryObj } from "@storybook/react"
import React, { useMemo, useState } from "react"
import {
  CalendarToday,
  OpenSeaBrandLogo,
  StylusNote,
  Wallet,
} from "../../icons"
import { CalendarTodayFilled } from "../../icons/material-symbols/outlined/CalendarTodayFilled"
import { Explore } from "../../icons/material-symbols/outlined/Explore"
import { ExploreFilled } from "../../icons/material-symbols/outlined/ExploreFilled"
import { MenuFilled } from "../../icons/material-symbols/outlined/MenuFilled"
import { SignalCellularAltFont300 } from "../../icons/material-symbols/outlined/SignalCellularAltFont300"
import { SignalCellularAltFont600 } from "../../icons/material-symbols/outlined/SignalCellularAltFont600"
import { StylusNoteFilled } from "../../icons/material-symbols/outlined/StylusNoteFilled"
import { CenterAligned } from "../CenterAligned"
import { Dropdown } from "../Dropdown"
import { Flex } from "../Flex"
import { FlexColumn } from "../FlexColumn"
import { Switch } from "../Switch"
import { Text } from "../Text"
import { Sidebar, SidebarProps } from "./Sidebar"

type Story = StoryObj<typeof Sidebar>

const meta: Meta<typeof Sidebar> = {
  title: "Design System/Sidebar",
  component: Sidebar,
  args: {
    side: "left",
  },
  parameters: {
    layout: "fullscreen",
  },
}

export default meta

const Template = (args: SidebarProps) => {
  const profileImage = useMemo(() => faker.image.dataUri(), [])

  const menuItems = [
    { icon: Explore, title: "Discover", activeIcon: ExploreFilled },
    {
      icon: SignalCellularAltFont300,
      title: "Stats",
      activeIcon: SignalCellularAltFont600,
    },
    { icon: Wallet, title: "My Items", activeIcon: Wallet },
    { icon: CalendarToday, title: "Drops", activeIcon: CalendarTodayFilled },
    { icon: StylusNote, title: "Create", activeIcon: StylusNoteFilled },
  ] as const

  const profileItems = [
    { title: "My Profile" },
    { title: "Offers" },
    { title: "Portfolio" },
    { title: "Watchlist" },
    { title: "Activity" },
  ] as const

  const [activeItem, setActiveItem] = useState("")

  const sidebar = (
    <Sidebar {...args}>
      <Sidebar.Item
        className="pl-[3px]"
        onClick={() => setActiveItem("Discover")}
      >
        <Sidebar.Item.Avatar icon={OpenSeaBrandLogo} size={30} />
      </Sidebar.Item>
      {menuItems.map(({ icon: Icon, title, activeIcon: ActiveIcon }) => (
        <Sidebar.Item
          active={activeItem === title}
          key={title}
          onClick={() => setActiveItem(title)}
        >
          <Sidebar.Item.Avatar
            icon={activeItem === title ? ActiveIcon : Icon}
          />
          <Sidebar.Item.Title>{title}</Sidebar.Item.Title>
        </Sidebar.Item>
      ))}
      <Sidebar.CollapsibleItem
        active={profileItems.some(item => item.title === activeItem)}
        content={profileItems.map(({ title }) => (
          <Sidebar.Item
            active={activeItem === title}
            key={title}
            size="sm"
            onClick={() => setActiveItem(title)}
          >
            <Sidebar.Item.Title size="sm">{title}</Sidebar.Item.Title>
          </Sidebar.Item>
        ))}
      >
        <Sidebar.Item.Avatar rounded src={profileImage} />
        <Sidebar.Item.Title>zmoney.eth</Sidebar.Item.Title>
      </Sidebar.CollapsibleItem>

      <div className="mt-auto">
        <Sidebar.Open className="m-2">
          <div className="w-[calc(200px_-_32px)] py-4">
            <Flex className="justify-between">
              <Text weight="semibold">Pro Mode</Text>
              <Switch />
            </Flex>
            <Text color="text-secondary" size="xs">
              Advanced tool &amp; analytics
            </Text>
          </div>
        </Sidebar.Open>
        <Dropdown
          content={
            <>
              <Dropdown.Item onSelect={() => alert("Hello!")}>
                <Dropdown.Item.Avatar icon={Wallet} />
                <Dropdown.Item.Content>
                  <Dropdown.Item.Title>Hello</Dropdown.Item.Title>
                </Dropdown.Item.Content>
              </Dropdown.Item>
              <Dropdown.Item href="https://opensea.io">
                <Dropdown.Item.Content>
                  <Dropdown.Item.Title>OpenSea</Dropdown.Item.Title>
                </Dropdown.Item.Content>
              </Dropdown.Item>
            </>
          }
          overrides={{
            Content: {
              className:
                "w-[300px] max-h-fit mb-2 bg-bg-additional-1 backdrop-blur-[60px]",
            },
          }}
          side="right"
          sideOffset={24}
          onOpenChange={isOpen => {
            setActiveItem(isOpen ? "More" : "")
          }}
        >
          <Sidebar.Item active={activeItem === "More"}>
            <Sidebar.Item.Avatar icon={MenuFilled} />
            <Sidebar.Item.Title>More</Sidebar.Item.Title>
          </Sidebar.Item>
        </Dropdown>
      </div>
    </Sidebar>
  )

  const main = (
    <FlexColumn className="w-full">
      <CenterAligned className="h-screen">
        <Text.Display size="lg">OpenSea Homepage</Text.Display>
      </CenterAligned>
      <CenterAligned className="h-screen">
        <Text.Display size="lg">OpenSea Homepage content</Text.Display>
      </CenterAligned>
    </FlexColumn>
  )

  return (
    <div className="flex h-full">
      {args.side === "left" ? (
        <>
          {sidebar}
          {main}
        </>
      ) : (
        <>
          {main}
          {sidebar}
        </>
      )}
    </div>
  )
}

export const Default: Story = {
  render: Template,
}

export const Right: Story = {
  render: Template,
  args: {
    side: "right",
  },
}

export const FillExpandedSpace: Story = {
  render: Template,
  args: {
    fillExpandedSpace: true,
  },
}

export const FillExpandedSpaceRight: Story = {
  render: Template,
  args: {
    side: "right",
    fillExpandedSpace: true,
  },
}