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: "wrn-container wrn-container--narrow",
  WideContainer: "wrn-container wrn-container--wide",
  FullBleed: "wrn-full-bleed",
  Flex: "wrn-flex",
  AutoGrid: "wrn-auto-grid",
  SplitLayout: "wrn-split-layout",
  SidebarLayout: "wrn-sidebar-layout",
  StickyLayout: "wrn-sticky-layout",
  AspectRatio: "wrn-aspect-ratio",
  Panel: "wrn-panel",
  Surface: "wrn-surface",
  Well: "wrn-well",
  InsetPanel: "wrn-inset-panel",
  ScrollArea: "wrn-scroll-area",
  Sticky: "wrn-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="wrn-type wrn-type--${variant} wrn-text--{align} ${name === "MutedText" ? "wrn-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="wrn-btn wrn-btn--${variant} {class}">{label}<slot /></button> }
}`,
  );
}

for (const name of cards) {
  add(
    name,
    `component ${name} {
  props {
    title = ""
    description = ""
    href = ""
    class = ""
  }
  view { <article class="wrn-card wrn-catalog-card wrn-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="wrn-catalog-card__link"><span class="wrn-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="wrn-badge wrn-badge--{variant} wrn-catalog-badge wrn-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
}`,
  );
}