"use client";

import React from "react";
import { DynamicTabT } from "./types";
import { AnimatePresence, motion } from "framer-motion";

import { Collapse } from "@shared/components/collapse";
import { MaterialIcon } from "@shared/components/material-icon";
import { Button } from "@shared/contentful/blocks/button";
import { cx } from "@shared/utils";

export interface TabViewProps {
  items: DynamicTabT[];
  currentTabIndex: number;
  onTabClick: (index: number, anchor: string) => void;
}

export function TabView({ items, currentTabIndex, onTabClick }: TabViewProps) {
  return (
    <>
      <div className="overflow-x-auto px-5 [-ms-overflow-style:none] [scrollbar-width:none] md:flex md:justify-center [&::-webkit-scrollbar]:hidden">
        <div className="flex w-max gap-10">
          {items.map((item, index) => (
            <Button
              showButtonAs="unstyled"
              key={index}
              onClick={() => onTabClick(index, item.anchorId)}
              buttonClassName={cx(
                "py-2 whitespace-nowrap",
                index === currentTabIndex
                  ? "label1 border-b-2 border-border-focus-secondary"
                  : "body1"
              )}
            >
              {item.tabName}
            </Button>
          ))}
        </div>
      </div>

      {items.map((item, index) => (
        <div key={index}>
          <AnimatePresence>
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{
                height: index === currentTabIndex ? "auto" : 0,
                opacity: index === currentTabIndex ? 1 : 0,
              }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.3 }}
            >
              {item.tabContent}
            </motion.div>
          </AnimatePresence>
        </div>
      ))}
    </>
  );
}

export function AccordionView({
  items,
  currentTabIndex,
  onTabClick,
}: TabViewProps) {
  return (
    <>
      {items.map((item, index) => (
        <div key={index} className="py-5">
          <Button
            showButtonAs="unstyled"
            onClick={() => onTabClick(index, item.anchorId)}
            buttonClassName={cx(
              "w-full flex justify-between items-center px-4 py-5",
              index === currentTabIndex ? "bg-bg-surface-active" : ""
            )}
          >
            <span className={"heading6"}>{item.tabName}</span>
            <MaterialIcon
              name={
                index === currentTabIndex
                  ? "keyboard_arrow_down"
                  : "keyboard_arrow_up"
              }
              fill={1}
              size={48}
            />
          </Button>
          <Collapse open={index === currentTabIndex}>
            <div className={cx("px-4 py-4")}>{item.tabContent}</div>
          </Collapse>
        </div>
      ))}
    </>
  );
}

export function SidebarView({
  items,
  currentTabIndex,
  onTabClick,
}: TabViewProps) {
  return (
    <div className="flex px-5 py-20">
      <div className="rounded-surface-lg border border-border-secondary shadow-lg">
        <div className="flex min-w-80 flex-col gap-4 px-6 py-7">
          {items.map((item, index) => (
            <Button
              showButtonAs="unstyled"
              key={index}
              onClick={() => onTabClick(index, item.anchorId)}
              buttonClassName={cx(
                "px-4 py-3 whitespace-nowrap text-left rounded-button-sm",
                index === currentTabIndex
                  ? "label1 text-white bg-bg-inverse"
                  : "body1"
              )}
            >
              {item.tabName}
            </Button>
          ))}
        </div>
      </div>

      <div className="grow">
        {items.map((item, index) => (
          <div key={index}>
            <AnimatePresence>
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{
                  height: index === currentTabIndex ? "auto" : 0,
                  opacity: index === currentTabIndex ? 1 : 0,
                }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.3 }}
              >
                {item.tabContent}
              </motion.div>
            </AnimatePresence>
          </div>
        ))}
      </div>
    </div>
  );
}