"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { cn } from "@/lib/utils";
import { AnimatePresence, m, MotionConfig } from "motion/react";
import React from "react";

type IconProps = React.ComponentProps<"svg">;

const Icons = {
  stacked: (props: IconProps) => (
    <svg
      id="Cards"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10.1 3.2C11.1 2.4 12.3 2.1 13.7 2.3L18.1 3C18.1 3 18.1 3 18.1 3C19.5 3.2 20.6 3.8 21.3 4.9C22 5.9 22.2 7.1 22 8.5C22 8.5 22 8.5 22 8.5L21.1 14.9C20.9 16.2 20.3 17.4 19.3 18.1C18.8 18.6 18.1 18.9 17.4 19C16.9 19.5 16.2 19.8 15.5 20.1L11.2 21.5C11.2 21.5 11.2 21.5 11.2 21.5C9.9 21.9 8.6 21.8 7.6 21.2C6.5 20.6 5.7 19.6 5.3 18.3L3.3 12.2C3.3 12.2 3.3 12.2 3.3 12.2C2.8 10.9 2.9 9.6 3.4 8.5C3.9 7.4 4.9 6.5 6.2 6.1C6.2 6.1 6.2 6.1 6.2 6.1L8.7 5.3C9 4.4 9.5 3.7 10.1 3.2ZM10 6.2C10 6.1 10 6 10 6C10.2 5.3 10.6 4.7 11.1 4.4C11.7 3.9 12.5 3.6 13.5 3.8L17.9 4.5C18.9 4.6 19.6 5.1 20.1 5.7C20.5 6.3 20.7 7.2 20.5 8.2L19.6 14.7C19.4 15.7 19 16.5 18.4 16.9C18 17.2 17.5 17.5 17 17.5C17 17.5 16.9 17.5 16.9 17.5C16.6 17.6 16.3 17.6 16 17.5L11.5 16.8C10.5 16.7 9.8 16.2 9.4 15.6C8.9 15 8.7 14.1 8.9 13.1L9.9 6.6C9.9 6.5 9.9 6.3 10 6.2ZM8.3 7L7.4 12.8C7.2 14.2 7.5 15.4 8.1 16.4C8.8 17.5 9.9 18.1 11.3 18.3L14.6 18.8L10.8 20.1L10.8 20.1C9.8 20.4 9 20.3 8.3 19.9C7.6 19.5 7 18.9 6.7 17.9C6.7 17.9 6.7 17.9 6.7 17.9L4.7 11.7L4.7 11.7C4.4 10.7 4.4 9.8 4.7 9.1C5.1 8.4 5.7 7.9 6.6 7.5L8.3 7Z"
        fill="currentColor"
      ></path>
    </svg>
  ),
  grid: (props: IconProps) => (
    <svg
      id="Grid interface"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.5 2.3C9.9 2.4 11 3.4 11.1 4.8C11.3 6 11.3 7.2 11.1 8.5C11 9.8 9.9 10.9 8.5 10.9C7.4 11 6.3 11 5.2 10.9C3.9 10.9 2.8 9.8 2.6 8.5C2.5 7.2 2.5 6 2.6 4.8C2.8 3.4 3.9 2.4 5.2 2.3C6.3 2.2 7.4 2.2 8.5 2.3ZM8.4 3.8C7.4 3.7 6.4 3.7 5.3 3.8C5.3 3.8 5.3 3.8 5.3 3.8C4.7 3.8 4.2 4.3 4.1 4.9L4.1 4.9L4.1 4.9C4 6.1 4 7.2 4.1 8.3L4.1 8.3C4.2 8.9 4.7 9.4 5.3 9.4C5.3 9.4 5.3 9.4 5.3 9.4C6.4 9.5 7.4 9.5 8.4 9.4C8.4 9.4 8.4 9.4 8.5 9.4C9.1 9.4 9.6 8.9 9.6 8.3L9.6 8.3C9.8 7.2 9.8 6.1 9.6 4.9L9.6 4.9C9.6 4.3 9.1 3.8 8.5 3.8C8.4 3.8 8.4 3.8 8.4 3.8Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.5 13.1C9.9 13.1 11 14.2 11.1 15.5C11.3 16.8 11.3 18 11.1 19.2C11 20.6 9.9 21.6 8.5 21.7C7.4 21.8 6.3 21.8 5.2 21.7C3.9 21.6 2.8 20.6 2.6 19.2C2.5 18 2.5 16.8 2.6 15.5C2.8 14.2 3.9 13.1 5.2 13.1C6.3 13 7.4 13 8.5 13.1ZM8.4 14.6C7.4 14.5 6.4 14.5 5.3 14.6C5.3 14.6 5.3 14.6 5.3 14.6C4.7 14.6 4.2 15.1 4.1 15.7L4.1 15.7L4.1 15.7C4 16.8 4 17.9 4.1 19.1L4.1 19.1C4.2 19.7 4.7 20.2 5.3 20.2C5.3 20.2 5.3 20.2 5.3 20.2C6.4 20.3 7.4 20.3 8.4 20.2C8.4 20.2 8.4 20.2 8.5 20.2C9.1 20.2 9.6 19.7 9.6 19.1L9.6 19.1C9.8 17.9 9.8 16.8 9.6 15.7L9.6 15.7C9.6 15.1 9.1 14.6 8.5 14.6C8.4 14.6 8.4 14.6 8.4 14.6Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M19.3 13.1C20.6 13.1 21.8 14.2 21.9 15.5C22 16.8 22 18 21.9 19.2C21.7 20.6 20.6 21.6 19.3 21.7C18.2 21.8 17.1 21.8 16 21.7C14.6 21.6 13.5 20.6 13.4 19.2C13.2 18 13.2 16.8 13.4 15.5C13.5 14.2 14.6 13.1 16 13.1C17.1 13 18.2 13 19.3 13.1ZM19.2 14.6C18.1 14.5 17.1 14.5 16.1 14.6C16.1 14.6 16.1 14.6 16.1 14.6C15.4 14.6 14.9 15.1 14.9 15.7L14.9 15.7L14.9 15.7C14.7 16.8 14.7 17.9 14.9 19.1L14.9 19.1C14.9 19.7 15.4 20.2 16 20.2C16.1 20.2 16.1 20.2 16.1 20.2C17.1 20.3 18.1 20.3 19.2 20.2C19.2 20.2 19.2 20.2 19.2 20.2C19.8 20.2 20.3 19.7 20.4 19.1L20.4 19.1C20.5 17.9 20.5 16.8 20.4 15.7C20.4 15.7 20.4 15.7 20.4 15.7C20.3 15.1 19.8 14.6 19.2 14.6C19.2 14.6 19.2 14.6 19.2 14.6Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M19.3 2.3C20.6 2.4 21.8 3.4 21.9 4.8C22 6 22 7.2 21.9 8.5C21.7 9.8 20.6 10.9 19.3 10.9C18.2 11 17.1 11 16 10.9C14.6 10.9 13.5 9.8 13.4 8.5C13.2 7.2 13.2 6 13.4 4.8C13.5 3.4 14.6 2.4 16 2.3C17.1 2.2 18.2 2.2 19.3 2.3ZM19.2 3.8C18.1 3.7 17.1 3.7 16.1 3.8C16.1 3.8 16.1 3.8 16.1 3.8C15.4 3.8 14.9 4.3 14.9 4.9L14.9 4.9L14.9 4.9C14.7 6.1 14.7 7.2 14.9 8.3L14.9 8.3C14.9 8.9 15.4 9.4 16 9.4C16.1 9.4 16.1 9.4 16.1 9.4C17.1 9.5 18.1 9.5 19.2 9.4C19.2 9.4 19.2 9.4 19.2 9.4C19.8 9.4 20.3 8.9 20.4 8.3L20.4 8.3C20.5 7.2 20.5 6.1 20.4 4.9C20.4 4.9 20.4 4.9 20.4 4.9C20.3 4.3 19.8 3.8 19.2 3.8C19.2 3.8 19.2 3.8 19.2 3.8Z"
        fill="currentColor"
      ></path>
    </svg>
  ),
  list: (props: IconProps) => (
    <svg
      id="Scroll list"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9 8.9C9.4 9.3 10 9.3 10.4 8.9C10.8 8.5 10.8 7.9 10.4 7.5L7.5 4.7C7.5 4.7 7.5 4.7 7.5 4.7L7.5 4.7C7.4 4.6 7.3 4.5 7.2 4.5C7 4.4 6.7 4.4 6.5 4.5C6.3 4.5 6.2 4.6 6.1 4.7C6.1 4.7 6.1 4.7 6.1 4.7L6.1 4.7C6.1 4.7 6.1 4.7 6.1 4.7L3.3 7.5C2.9 7.9 2.9 8.5 3.3 8.9C3.7 9.3 4.3 9.3 4.7 8.9L5.8 7.8V16.2L4.7 15.1C4.3 14.7 3.7 14.7 3.3 15.1C2.9 15.5 2.9 16.1 3.3 16.5L6.1 19.3C6.2 19.4 6.3 19.5 6.5 19.5C6.6 19.6 6.7 19.6 6.8 19.6C7 19.6 7.1 19.6 7.2 19.5C7.3 19.5 7.4 19.4 7.5 19.3L10.4 16.5C10.8 16.1 10.8 15.5 10.4 15.1C10 14.7 9.4 14.7 9 15.1L7.8 16.2V7.8L9 8.9Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13.5 7.2H20C20.6 7.2 21 6.8 21 6.2C21 5.6 20.6 5.2 20 5.2H13.5C13 5.2 12.5 5.6 12.5 6.2C12.5 6.8 13 7.2 13.5 7.2Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20 11.1H13.5C13 11.1 12.5 11.5 12.5 12.1C12.5 12.7 13 13.1 13.5 13.1H20C20.6 13.1 21 12.7 21 12.1C21 11.5 20.6 11.1 20 11.1Z"
        fill="currentColor"
      ></path>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20 16.8H13.5C13 16.8 12.5 17.2 12.5 17.8C12.5 18.4 13 18.8 13.5 18.8H20C20.6 18.8 21 18.4 21 17.8C21 17.2 20.6 16.8 20 16.8Z"
        fill="currentColor"
      ></path>
    </svg>
  ),
  square: (props: IconProps) => (
    <svg
      width="13"
      height="14"
      viewBox="0 0 13 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g filter="url(#filter0_i_14_2337)">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M11.8 4.7L8.4 1.4C7.2 0.2 5.5 0.2 4.1 1.5L1 4.6C-0.3 5.9 -0.3 7.7 0.9 8.9L4.2 12.2C4.8 12.9 5.6 13.2 6.3 13.2C7.1 13.2 7.9 12.8 8.5 12.2L11.7 9C12.3 8.4 12.7 7.6 12.7 6.8C12.7 6 12.4 5.3 11.8 4.7Z"
          fill="#FEBE02"
          fillOpacity="0.15"
        ></path>
      </g>
      <defs>
        <filter
          id="filter0_i_14_2337"
          x="0"
          y="0.496094"
          width="12.6689"
          height="12.6746"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"
          ></feBlend>
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          ></feColorMatrix>
          <feOffset></feOffset>
          <feGaussianBlur stdDeviation="3.5"></feGaussianBlur>
          <feComposite
            in2="hardAlpha"
            operator="arithmetic"
            k2="-1"
            k3="1"
          ></feComposite>
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.996078 0 0 0 0 0.745098 0 0 0 0 0.00784314 0 0 0 0.5 0"
          ></feColorMatrix>
          <feBlend
            mode="normal"
            in2="shape"
            result="effect1_innerShadow_14_2337"
          ></feBlend>
        </filter>
      </defs>
    </svg>
  ),
};

type Views = "List" | "Grid" | "Stacked";

type ViewItem = {
  icon: (props: React.ComponentProps<"svg">) => React.JSX.Element;
  name: string;
  view: Views;
};

type Item = {
  name: string;
  image: string;
  angle?: number;
  rate: number;
  position: number;
};

const views: ViewItem[] = [
  {
    name: "List view",
    icon: Icons.list,
    view: "List",
  },
  {
    name: "Card view",
    icon: Icons.grid,
    view: "Grid",
  },
  {
    name: "Pack view",
    icon: Icons.stacked,
    view: "Stacked",
  },
];

const TRANSITION = {
  type: "spring",
  stiffness: 300,
  damping: 30,
  mass: 0.5,
  duration: 0.5,
};

const items: Item[] = [
  {
    name: "Skilled Fingers Series",
    image: "/first.svg",
    angle: -10,
    rate: 0.855,
    position: 209,
  },
  {
    name: "Vibrant Vibes Series",
    image: "/second.svg",
    angle: 15,
    rate: 0.209,
    position: 803,
  },
];

const View = () => {
  const [view, setView] = React.useState<Views>("List");
  const handleClick = (newView: Views) => {
    setView(newView);
  };
  return (
    <MotionConfig transition={TRANSITION}>
      <div className="center full ">
        <div className="max-w-xs w-full space-y-4 overflow-hidden">
          <div className="h-14 border-b flex gap-2">
            {views.map((item) => (
              <BaseButton
                key={item.name}
                className={cn(
                  "flex items-center gap-1 h-8 px-[10px] rounded-full bg-muted text-muted-foreground text-sm font-medium outline-none",
                  item.view === view && "bg-[#00b3ff] text-white"
                )}
                onClick={() => handleClick(item.view)}
              >
                <item.icon className="size-4" />
                {item.name}
              </BaseButton>
            ))}
          </div>

          <div className="min-h-80 relative ">
            <AnimatePresence mode="popLayout">
              {view === "List" && <ListView view={view} />}
              {view === "Grid" && <GridView view={view} />}
              {view === "Stacked" && <StackedView view={view} />}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </MotionConfig>
  );
};

const ListView = ({ view }: { view: Views }) => {
  return (
    <div className="flex flex-col gap-2">
      {items.map((item, idx) => (
        <ItemView
          key={item.name}
          item={item}
          idx={idx}
          view={view}
          className="flex items-center gap-2 flex-row"
        />
      ))}
    </div>
  );
};

const GridView = ({ view }: { view: Views }) => {
  return (
    <div className="grid grid-cols-2 gap-4">
      {items.map((item, idx) => (
        <ItemView key={item.name} item={item} idx={idx} view={view} />
      ))}
    </div>
  );
};

const StackedView = ({ view }: { view: Views }) => {
  return (
    <div>
      <div className="relative flex w-full items-center justify-center h-32">
        {items.map((item, idx) => (
          <ItemView
            key={item.name}
            item={item}
            idx={idx}
            view={view}
            className="absolute"
          />
        ))}
      </div>
      <div className="text-center mt-2">
        <AnimatePresence>
          {view === "Stacked" && (
            <m.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="flex items-center gap-2 justify-center flex-col text-sm"
            >
              <span>{items.length} Collectibles</span>
              <span>
                {items.reduce((acc, item) => acc + item.rate, 0)}{" "}
                <span className="text-muted-foreground">ETH</span>
              </span>
            </m.p>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

const ItemView = ({
  item,
  idx,
  view,
  className,
}: {
  item: Item;
  idx: number;
  view: Views;
  className?: string;
}) => {
  return (
    <m.div
      className={cn("flex flex-col gap-2", className)}
      layoutId={`view-item-container-${idx}`}
      style={{
        rotate: view === "Stacked" ? item.angle : 0,
        zIndex: view === "Stacked" ? items.length - idx : 0,
      }}
    >
      <m.img
        layoutId={`view-item-image-${idx}`}
        src={item.image}
        alt={item.name}
        className={cn(
          view === "Grid"
            ? "size-40 rounded-xl"
            : view === "List"
            ? "size-14 rounded-md"
            : "size-20 rounded-xl",
          "object-cover "
        )}
      />
      <AnimatePresence>
        {view !== "Stacked" && (
          <m.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className={cn(
              "flex items-center gap-2",
              view === "List" && "flex-1"
            )}
          >
            <div
              className={cn(
                "flex flex-col gap-1 text-sm font-medium",
                view === "List" && "flex-1"
              )}
            >
              <m.h3 layoutId={`view-item-title-${idx}`} className="">
                {item.name}
              </m.h3>
              <m.p
                layoutId={`view-item-description-${idx}`}
                className="text-xs flex items-center justify-between"
              >
                <span className="flex items-center gap-1">
                  <span>{item.rate}</span>{" "}
                  <span className="text-muted-foreground">ETH</span>
                </span>
                {view === "Grid" && (
                  <m.span
                    layoutId={`view-item-position-${idx}`}
                    className="flex items-center gap-1"
                  >
                    <Icons.square className="size-4" />
                    <span className="text-muted-foreground">
                      #{item.position}
                    </span>
                  </m.span>
                )}
              </m.p>
            </div>
            {view === "List" && (
              <m.span
                layoutId={`view-item-position-${idx}`}
                className="flex items-center gap-1"
              >
                <Icons.square className="size-4" />
                <span className="text-muted-foreground">#{item.position}</span>
              </m.span>
            )}
          </m.div>
        )}
      </AnimatePresence>
    </m.div>
  );
};

export default View;
Layout Switcher

Skilled Fingers Series

Vibrant Vibes Series

Skilled Fingers Series

Vibrant Vibes Series
