import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardSidebarComponent, SidebarMenuItem } from "./dashboard.sidebar.component";
import { LayoutContainerComponent } from "../../shared/layout-containers/layout-container.component";
import {
  faWindowMaximize, faUserCircle, faCertificate, faHandPointer, faIdCard, faTags,
  faCheckSquare, faKeyboard, faThLarge, faList, faDotCircle, faSearch, faToggleOn, faNewspaper,
  faTable, faImage, faImages, faPlay, faBars, faEdit, faEye, faCompass,
  faVideo, faComment, faMousePointer, faLayerGroup, faSquare, faCalendarDays, faClock,
  faGripVertical, faArrowsAlt, faBoxOpen, faChevronLeft, faSpinner, faExclamationTriangle,
  faCloudUploadAlt, faFileText, faListAlt, faCircle, faExpandArrowsAlt, faCircleNotch, faSliders,
  faMinus, faInfoCircle, faChevronDown, faCaretUp, faExclamationCircle, faSitemap, faStream,
  faBell, faRoute, faChevronUp, faEllipsisV, faCut, faPalette, faExchangeAlt, faTools, faHeart, faCircleDot, faColumns,
  faFolderOpen, faDesktop, faListUl, faArrowDown, faThumbtack
} from '@fortawesome/free-solid-svg-icons';
import { DemoRoutes } from '../../demos';
import { ScrollContainerComponent } from "../../../../../ui-essentials/src/public-api";
// import { DemoRoutes } from "../../../../../ui-essentials/src/public-api";

@Component({
  selector: 'skyui-dashboard',
  standalone: true,
  imports: [
    CommonModule,
    DashboardSidebarComponent,
    LayoutContainerComponent,
    DemoRoutes,
    ScrollContainerComponent
],
  template: `


<ui-layout-container [topBarHeight]=64 [leftNavigationState]="'full'" 
  [showTopBar]=false [customLeftWidth]=260>
  <div slot=left-navigation style="height: 100vh;">
    <ui-scroll-container scrollbarVisibility="never">
      <skyui-dashboard-sidebar [data]=menuItems (selected)="menuClick($event)"></skyui-dashboard-sidebar>
    </ui-scroll-container>
  </div>

  <div slot=content style="height: 100vh;">
    <ui-scroll-container>
      <ui-demo-routes [route]=route></ui-demo-routes>
    </ui-scroll-container>
  </div>
</ui-layout-container>

  `,
})
export class DashboardComponent {
  // Sidebar state
  sidebarCollapsed = false;
  route: string = "image-container"
  faBars = faBars; 

  // FontAwesome icons
  faWindowMaximize = faWindowMaximize;
  faUserCircle = faUserCircle;
  faCertificate = faCertificate;
  faHandPointer = faHandPointer;
  faIdCard = faIdCard;
  faTags = faTags;
  faCheckSquare = faCheckSquare;
  faKeyboard = faKeyboard;
  faThLarge = faThLarge;
  faList = faList;
  faDotCircle = faDotCircle;
  faSearch = faSearch;
  faToggleOn = faToggleOn;
  faTable = faTable;
  faImage = faImage;
  faImages = faImages;
  faPlay = faPlay;
  faEdit = faEdit;
  faEye = faEye;
  faCompass = faCompass;
  faVideo = faVideo;
  faComment = faComment;
  faMousePointer = faMousePointer;
  faLayerGroup = faLayerGroup;
  faSquare = faSquare;
  faCalendarDays = faCalendarDays;
  faClock = faClock;
  faGripVertical = faGripVertical;
  faArrowsAlt = faArrowsAlt;
  faBoxOpen = faBoxOpen;
  faChevronLeft = faChevronLeft;
  faSpinner = faSpinner;
  faExclamationTriangle = faExclamationTriangle;
  faCloudUploadAlt = faCloudUploadAlt;
  faFileText = faFileText;
  faListAlt = faListAlt;
  faCircle = faCircle;
  faExpandArrowsAlt = faExpandArrowsAlt;
  faCircleNotch = faCircleNotch;
  faSliders = faSliders;
  faMinus = faMinus;
  faInfoCircle = faInfoCircle;
  faChevronDown = faChevronDown;
  faCaretUp = faCaretUp;
  faSitemap = faSitemap;
  faStream = faStream;
  faBell = faBell;
  faRoute = faRoute;
  faChevronUp = faChevronUp;
  faEllipsisV = faEllipsisV;
  faCut = faCut;
  faPalette = faPalette;
  faExchangeAlt = faExchangeAlt;
  faTools = faTools;
  faHeart = faHeart;
  faCircleDot = faCircleDot;
  faColumns = faColumns;
  faFolderOpen = faFolderOpen;
  faDesktop = faDesktop;
  faNewspaper = faNewspaper;
  faListUl = faListUl;
  faArrowDown = faArrowDown;
  faThumbtack = faThumbtack;

  menuItems: any = []

  // Toggle sidebar method
  toggleSidebar() {
    this.sidebarCollapsed = !this.sidebarCollapsed;
  }
  
  addMenuItem(id: string, label: string, icon?: any, children?: SidebarMenuItem[]): void {
    const menuItem: SidebarMenuItem = {
      id,
      label,
      icon,
      active: false,
      children,
      isParent: !!children,
      expanded: false
    };
    this.menuItems.push(menuItem);
  }

  createChildItem(id: string, label: string, icon?: any): SidebarMenuItem {
    return {
      id,
      label,
      icon,
      active: false,
      isParent: false
    };
  }


  ngOnInit() {
    // Forms category
    const formsChildren = [
      this.createChildItem("input", "Input Fields", this.faKeyboard),
      this.createChildItem("checkbox", "Checkboxes", this.faCheckSquare),
      this.createChildItem("radio", "Radio Buttons", this.faDotCircle),
      this.createChildItem("search", "Search Bars", this.faSearch),
      this.createChildItem("switch", "Switches", this.faToggleOn),
      this.createChildItem("autocomplete", "Autocomplete", this.faListAlt),
      this.createChildItem("date-picker", "Date Picker", this.faCalendarDays),
      this.createChildItem("time-picker", "Time Picker", this.faClock),
      this.createChildItem("file-upload", "File Upload", this.faCloudUploadAlt),
      this.createChildItem("form-field", "Form Field", this.faFileText),
      this.createChildItem("range-slider", "Range Slider", this.faSliders),
      this.createChildItem("color-picker", "Color Picker", this.faPalette),
      this.createChildItem("tag-input", "Tag Input", this.faTags)
    ];
    this.addMenuItem("forms", "Forms", this.faEdit, formsChildren);

    // Data Display category
    const dataDisplayChildren = [
      this.createChildItem("accordion", "Accordion", this.faChevronDown),
      this.createChildItem("table", "Tables", this.faTable),
      this.createChildItem("enhanced-table", "Enhanced Table", this.faTable),
      this.createChildItem("lists", "Lists", this.faList),
      this.createChildItem("progress", "Progress Bars", this.faCheckSquare),
      this.createChildItem("badge", "Badges", this.faCertificate),
      this.createChildItem("avatar", "Avatars", this.faUserCircle),
      this.createChildItem("cards", "Cards", this.faIdCard),
      this.createChildItem("divider", "Divider", this.faMinus),
      this.createChildItem("timeline", "Timeline", this.faStream),
      this.createChildItem("tooltip", "Tooltip", this.faInfoCircle),
      this.createChildItem("tree-view", "Tree View", this.faSitemap),
      this.createChildItem("transfer-list", "Transfer List", this.faExchangeAlt)
    ];
    this.addMenuItem("data-display", "Data Display", this.faEye, dataDisplayChildren);

    // Navigation category
    const navigationChildren = [
      this.createChildItem("appbar", "App Bars", this.faWindowMaximize),
      this.createChildItem("bottom-navigation", "Bottom Navigation", this.faChevronUp),
      this.createChildItem("menu", "Menus", this.faBars),
      this.createChildItem("pagination", "Pagination", this.faChevronLeft),
      this.createChildItem("stepper", "Stepper", this.faRoute)
    ];
    this.addMenuItem("navigation", "Navigation", this.faCompass, navigationChildren);

    // Media category
    const mediaChildren = [
      this.createChildItem("image-container", "Image Container", this.faImage),
      this.createChildItem("carousel", "Carousel", this.faImages),
      this.createChildItem("video-player", "Video Player", this.faPlay)
    ];
    this.addMenuItem("media", "Media", this.faVideo, mediaChildren);

    // Actions category
    const actionsChildren = [
      this.createChildItem("buttons", "Buttons", this.faMousePointer),
      this.createChildItem("icon-button", "Icon Buttons", this.faHeart),
      this.createChildItem("fab-menu", "FAB Menu", this.faEllipsisV),
      this.createChildItem("split-button", "Split Button", this.faCut)
    ];
    this.addMenuItem("actions", "Actions", this.faMousePointer, actionsChildren);

    // Feedback category
    const feedbackChildren = [
      this.createChildItem("alert", "Alert", faExclamationCircle),
      this.createChildItem("snackbar", "Snackbar", this.faBell),
      this.createChildItem("toast", "Toast", this.faBell),
      this.createChildItem("chips", "Chips", this.faTags),
      this.createChildItem("loading-spinner", "Loading Spinner", this.faSpinner),
      this.createChildItem("skeleton-loader", "Skeleton Loader", this.faSpinner),
      this.createChildItem("empty-state", "Empty State", this.faExclamationTriangle),
      this.createChildItem("progress-circle", "Progress Circle", this.faCircleNotch)
    ];
    this.addMenuItem("feedback", "Feedback", this.faComment, feedbackChildren);

    // Layout category
    const layoutChildren = [
      this.createChildItem("aspect-ratio", "Aspect Ratio", this.faExpandArrowsAlt),
      this.createChildItem("bento-grid", "Bento Grid", this.faThLarge),
      this.createChildItem("box", "Box (Padding/Margin)", this.faSquare),
      this.createChildItem("breakpoint-container", "Breakpoint Container", this.faEye),
      this.createChildItem("center", "Center (Content Alignment)", this.faCircleDot),
      this.createChildItem("column", "Column Layout", this.faColumns),
      this.createChildItem("container", "Container", this.faBoxOpen),
      this.createChildItem("feed-layout", "Feed Layout", this.faNewspaper),
      this.createChildItem("flex", "Flex (Flexbox Container)", this.faArrowsAlt),
      this.createChildItem("gallery-grid", "Gallery Grid", this.faImages),
      this.createChildItem("grid-system", "Grid System", this.faGripVertical),
      this.createChildItem("grid-container", "Grid Container", this.faThLarge),
      this.createChildItem("infinite-scroll-container", "Infinite Scroll Container", this.faArrowDown),
      this.createChildItem("kanban-board", "Kanban Board Layout", this.faColumns),
      this.createChildItem("list-detail-layout", "List Detail Layout", this.faListUl),
      this.createChildItem("masonry", "Masonry Layout", this.faThLarge),
      this.createChildItem("scroll-container", "Scroll Container", this.faListAlt),
      this.createChildItem("supporting-pane-layout", "Supporting Pane Layout", this.faWindowMaximize),
      this.createChildItem("section", "Section (Semantic Wrapper)", this.faLayerGroup),
      this.createChildItem("sidebar-layout", "Sidebar Layout", this.faBars),
      this.createChildItem("spacer", "Spacer", this.faArrowsAlt),
      this.createChildItem("split-view", "Split View / Resizable Panels", this.faColumns),
      this.createChildItem("stack", "Stack (VStack/HStack)", this.faStream),
      this.createChildItem("sticky-layout", "Sticky Layout", this.faThumbtack),
      this.createChildItem("tabs-container", "Tabs Container", this.faFolderOpen),
      this.createChildItem("dashboard-shell", "Dashboard Shell", this.faDesktop)
    ];
    this.addMenuItem("layouts", "Layouts", this.faLayerGroup, layoutChildren);

    // Overlays category
    const overlaysChildren = [
      this.createChildItem("modal", "Modal/Dialog", this.faSquare),
      this.createChildItem("drawer", "Drawer/Sidebar", this.faBars),
      this.createChildItem("popover", "Popover/Dropdown", this.faCaretUp),
      this.createChildItem("backdrop", "Backdrop", this.faCircle),
      this.createChildItem("overlay-container", "Overlay Container", this.faExpandArrowsAlt),
      this.createChildItem("command-palette", "Command Palette", this.faPalette),
      this.createChildItem("floating-toolbar", "Floating Toolbar", this.faTools)
    ];
    this.addMenuItem("overlays", "Overlays", this.faLayerGroup, overlaysChildren);


    // Landing category
    const landingChildren = [

      
      this.createChildItem("conversion", "Conversion", this.faSquare),
      this.createChildItem("landing-feature-grid", "Feature Grid", this.faSquare),
      this.createChildItem("landing-testimonials", "Testimonials", this.faBars),
      this.createChildItem("landing-logo-cloud", "Logo Cloud", this.faCaretUp),
      this.createChildItem("landing-statistics", "Statistics", this.faCaretUp),

      this.createChildItem("landing-faq", "FAQ", this.faCaretUp),
      this.createChildItem("landing-team", "Team", this.faCaretUp),
      this.createChildItem("landing-timeline", "Timeline", this.faCaretUp),
      this.createChildItem("landing-templates", "Templates", this.faCaretUp),


    ];
    this.addMenuItem("landing", "Landing", this.faLayerGroup, landingChildren);


    // Utilities (standalone)
    this.addMenuItem("fontawesome", "FontAwesome Icons", this.faCheckSquare);
    this.addMenuItem("accessibility", "Accessability", this.faCheckSquare);
    this.addMenuItem("animations", "Animations", this.faCheckSquare);
    this.addMenuItem("hcl-studio", "HCL Themes", this.faCheckSquare);
    this.addMenuItem("font-manager", "Font Manager", this.faCheckSquare);
    this.addMenuItem("data-utils", "Data Utils", this.faCheckSquare);
    this.addMenuItem("code-display", "Code Display", this.faCheckSquare);
    this.addMenuItem("backgrounds", "Backgrounds", this.faCheckSquare);

    
  }

  

  menuClick(id: string) {
    console.log(JSON.stringify(id))
    
    this.route = id.toString()
  }

}
