import { existsSync, writeFileSync } from "node:fs";
import { join } from "node:path";

const root = join(import.meta.dirname, "..", "packages", "ui", "components");

const typography = {
  DisplayHeading: "display",
  PageHeading: "heading",
  SectionHeading: "heading",
  SubsectionHeading: "heading",
  EyebrowText: "small",
  BodyText: "body",
  LeadText: "lead",
  SmallText: "small",
  MutedText: "small",
  InlineCode: "small",
  CodeText: "body",
  QuoteText: "lead",
  MetricText: "display",
  PriceText: "display",
};

const layouts = {
  NarrowContainer: "wire-container wire-container--narrow",
  WideContainer: "wire-container wire-container--wide",
  FullBleed: "wire-full-bleed",
  Flex: "wire-flex",
  AutoGrid: "wire-auto-grid",
  SplitLayout: "wire-split-layout",
  SidebarLayout: "wire-sidebar-layout",
  StickyLayout: "wire-sticky-layout",
  AspectRatio: "wire-aspect-ratio",
  Panel: "wire-panel",
  Surface: "wire-surface",
  Well: "wire-well",
  InsetPanel: "wire-inset-panel",
  ScrollArea: "wire-scroll-area",
  Sticky: "wire-sticky",
};

const buttons = {
  PrimaryButton: "primary",
  SecondaryButton: "default",
  TertiaryButton: "ghost",
  GhostButton: "ghost",
  DangerButton: "danger",
  LinkButton: "ghost",
  CopyButton: "default",
  ShareButton: "default",
  DownloadButton: "default",
  BackButton: "ghost",
  CloseButton: "ghost",
};

const cards = [
  "ClickableCard",
  "GlassCard",
  "OutlinedCard",
  "ElevatedCard",
  "InfoCard",
  "WarningCard",
  "SuccessCard",
  "ErrorCard",
  "UserCard",
  "ContactCard",
  "CampaignCard",
  "ChannelCard",
  "TemplateCard",
  "AssetCard",
  "IntegrationCard",
  "ConnectionCard",
  "WorkspaceCard",
  "ProjectCard",
  "NotificationCard",
];

const badges = [
  "ProductStatusBadge",
  "PreviewBadge",
  "VerifiedBadge",
  "NewBadge",
  "BetaBadge",
  "ComingSoonBadge",
  "Chip",
  "Pill",
  "Counter",
  "NotificationDot",
  "OnlineIndicator",
  "HealthIndicator",
];

function add(name, source) {
  const file = join(root, `${name}.wrn`);
  if (!existsSync(file)) writeFileSync(file, `${source.trim()}\n`);
}

for (const [name, variant] of Object.entries(typography)) {
  add(
    name,
    `component ${name} {
  props {
    text = ""
    align = "start"
    class = ""
  }
  view { <div class="wire-type wire-type--${variant} wire-text--{align} ${name === "MutedText" ? "wire-muted" : ""} {class}">{text}<slot /></div> }
}`,
  );
}

for (const [name, baseClass] of Object.entries(layouts)) {
  add(
    name,
    `component ${name} {
  props {
    class = ""
  }
  view { <div class="${baseClass} {class}"><slot /></div> }
}`,
  );
}

for (const [name, variant] of Object.entries(buttons)) {
  add(
    name,
    `component ${name} {
  props {
    label = "Action"
    type = "button"
    disabled = false
    class = ""
  }
  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--${variant} {class}">{label}<slot /></button> }
}`,
  );
}

for (const name of cards) {
  add(
    name,
    `component ${name} {
  props {
    title = ""
    description = ""
    href = ""
    class = ""
  }
  view { <article class="wire-card wire-catalog-card wire-catalog-card--${name.replace(/Card$/, "").toLowerCase()} {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
}`,
  );
}

for (const name of badges) {
  add(
    name,
    `component ${name} {
  props {
    label = "${name.replace(/Badge$|Indicator$|Dot$|Counter$/, "") || "Status"}"
    variant = "default"
    class = ""
  }
  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
}`,
  );
}
