import { $, Tag } from "sigpro";

import { Tag } from "sigpro";

export const Alert = (props, children) => Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
export const Badge = (props, children) => Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
export const Button = (props, children) => Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
export const Card = (props, children) => Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children);
export const CardTitle = (props, children) => Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
export const CardBody = (props, children) => Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
export const CardActions = (props, children) => Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
export const Carousel = (props, children) => Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
export const CarouselItem = (props, children) => Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
export const Chat = (props, children) => Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
export const ChatBubble = (props, children) => Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
export const Collapse = (props, children) => Tag("div", { ...props, class: `collapse ${props.class ?? ''}` }, children);
export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` });
export const Drawer = (props, children) => Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
export const Dropdown = (props, children) => Tag("details", { ...props, class: `dropdown ${props.class ?? ''}` }, children);
export const Fab = (props, children) => Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
export const Fieldset = (props, children) => Tag("fieldset", { ...props, class: `fieldset ${props.class ?? ''}` }, children);
export const Indicator = (props, children) => Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, children);
export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
export const Kbd = (props, children) => Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
export const Label = (props, children) => Tag("label", { ...props, class: `label ${props.class ?? ''}` }, children);
export const List = (props, children) => Tag("ul", { ...props, class: `list ${props.class ?? ''}` }, children);
export const Menu = (props, children) => Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
export const Modal = (props, children) => Tag("dialog", { ...props, class: `modal ${props.class ?? ''}` }, children);
export const Navbar = (props, children) => Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
export const Rating = (props, children) => Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children);
export const Select = (props, children) => Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` });
export const Stack = (props, children) => Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
export const Stat = (props, children) => Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, children);
export const Stats = (props, children) => Tag("div", { ...props, class: `stats ${props.class ?? ''}` }, children);
export const Steps = (props, children) => Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
export const Step = (props, children) => Tag("li", { ...props, class: `step ${props.class ?? ''}` }, children);
export const Swap = (props, children) => Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, children);
export const Table = (props, children) => Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
export const Tab = (props, children) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
export const Tabs = (props, children) => Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
export const TabContent = (props, children) => Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
export const Timeline = (props, children) => Tag("ul", { ...props, class: `timeline ${props.class ?? ''}` }, children);
export const Toast = (props, children) => Tag("div", { ...props, class: `toast ${props.class ?? ''}` }, children);
export const Toggle = (props) => Tag("input", { ...props, type: "checkbox", class: `toggle ${props.class ?? ''}` });
export const Tooltip = (props, children) => Tag("div", { ...props, class: `tooltip ${props.class ?? ''}` }, children);


// Complex
export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
  Tag("span", { class: "flex items-center" }, [
    p.label,
    Tag("span", {
      class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
      onclick: (e) => { e.stopPropagation(); p.onClose?.(e); }
    })
  ])
]);

export const TabItems = (props) => {
  const items = typeof p.items === "function" ? p.items : () => p.items || [];
  return For(
    items,
    (item, idx) => {
      const TabComp = item.closable ? TabClose : Tab;
      return [
        TabComp({
          label: item.label,
          class: () => p.activeIndex() === idx ? "tab-active" : "",
          onclick: (e) => { e.preventDefault(); p.activeIndex(idx); },
          onClose: () => p.onClose?.(idx, item)
        }),
        TabContent({
          style: () => `display: ${p.activeIndex() === idx ? "block" : "none"};`
        }, typeof item.content === "function" ? item.content() : item.content)
      ];
    },
    (item, idx) => item.id ?? idx
  );
};