import { strings } from '@angular-devkit/core';
import { E2eHarnessConfig } from './generate-component';

function classes(name: string, suffixes: readonly string[]): string[] {
  const base = strings.classify(name);
  return suffixes.map((suffix) => `${base}${suffix}`);
}

function camel(name: string): string {
  return strings.camelize(name);
}

export const accordionE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Header', 'Panel']),
  template: (name) => {
    const attribute = camel(name);
    return `<div ${attribute}>
  <h2><button type="button" ${attribute}Header value="one" [expanded]="true">One</button></h2>
  <div ${attribute}Panel value="one">First panel</div>
  <h2><button type="button" ${attribute}Header value="two">Two</button></h2>
  <div ${attribute}Panel value="two">Second panel</div>
  <h2><button type="button" ${attribute}Header value="disabled" disabled>Disabled</button></h2>
  <div ${attribute}Panel value="disabled">Disabled panel</div>
</div>`;
  },
};

export const breadcrumbE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item']),
  template: (name) => {
    const attribute = camel(name);
    return `<div ${attribute}>
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a ${attribute}Item href="/">Home</a></li>
      <li><a ${attribute}Item href="/current" current>Current</a></li>
    </ol>
  </nav>
</div>`;
  },
};

export const listGroupE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item']),
  template: (name) => {
    const attribute = camel(name);
    return `<ul ${attribute} label="Settings sections" [activeId]="'one'">
  <li ${attribute}Item value="one">One</li>
  <li ${attribute}Item value="two">Two</li>
</ul>`;
  },
};

export const menuButtonE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Trigger', 'Menu', 'Item']),
  template: (name) => {
    const attribute = camel(name);
    return `<div ${attribute}>
  <button type="button" ${attribute}Trigger>Options</button>
  <div ${attribute}Menu>
    <button type="button" ${attribute}Item>First action</button>
    <button type="button" ${attribute}Item>Second action</button>
  </div>
</div>`;
  },
};

export const navbarE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item', 'Toggle', 'Menu']),
  template: (name) => {
    const attribute = camel(name);
    return `<nav ${attribute} label="Main navigation">
  <button type="button" ${attribute}Toggle aria-label="Toggle navigation">Menu</button>
  <div ${attribute}Menu>
    <a ${attribute}Item href="/" current>Home</a>
    <a ${attribute}Item href="/settings">Settings</a>
  </div>
</nav>`;
  },
};

export const paginationE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item']),
  coreImports: ['signal'],
  template: (name) => {
    const attribute = camel(name);
    return `<nav ${attribute} label="Search results pages">
  <button type="button" aria-label="Previous page" [disabled]="currentPage() === 1" (click)="previous()">Previous</button>
  @for (page of pages; track page) {
    <a ${attribute}Item [href]="'?page=' + page" [current]="page === currentPage()">{{ page }}</a>
  }
  <button type="button" aria-label="Next page" [disabled]="currentPage() === pages.length" (click)="next()">Next</button>
</nav>`;
  },
  classBody: () => `  readonly pages = [1, 2, 3];
  readonly currentPage = signal(1);

  previous(): void {
    this.currentPage.update((page) => Math.max(1, page - 1));
  }

  next(): void {
    this.currentPage.update((page) => Math.min(this.pages.length, page + 1));
  }`,
};

export const tabsE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'List', 'Tab', 'Panel']),
  template: (name) => {
    const attribute = camel(name);
    return `<div ${attribute}>
  <div ${attribute}List label="Account">
    <button type="button" ${attribute}Tab value="profile" selected>Profile</button>
    <button type="button" ${attribute}Tab value="settings">Settings</button>
    <button type="button" ${attribute}Tab value="disabled" disabled>Disabled</button>
  </div>
  <div ${attribute}Panel value="profile">Profile panel</div>
  <div ${attribute}Panel value="settings">Settings panel</div>
  <div ${attribute}Panel value="disabled">Disabled panel</div>
</div>`;
  },
};

export const toolbarE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item']),
  template: (name) => {
    const attribute = camel(name);
    return `<div ${attribute} label="Text formatting">
  <button type="button" ${attribute}Item value="bold">Bold</button>
  <button type="button" ${attribute}Item value="italic">Italic</button>
</div>`;
  },
};

export const treeViewE2eHarness: E2eHarnessConfig = {
  imports: (name) => classes(name, ['', 'Item', 'Group']),
  template: (name) => {
    const attribute = camel(name);
    return `<ul ${attribute} label="Files">
  <li ${attribute}Item value="documents" [expanded]="true">
    Documents
    <ul ${attribute}Group>
      <li ${attribute}Item value="resume">Resume.pdf</li>
      <li ${attribute}Item value="cover-letter">Cover Letter.docx</li>
    </ul>
  </li>
</ul>`;
  },
};

export const interactiveRatingE2eHarness: E2eHarnessConfig = {
  template: (_name, selector) => `<${selector} [readonly]="false" />`,
};

export const interactiveStepsE2eHarness: E2eHarnessConfig = {
  template: (_name, selector) => `<${selector} interactive />`,
};