import { OrgChart } from 'schartik';

const data = {
  id: '1',
  name: 'John Smith',
  title: 'CEO',
  children: [
    {
      id: '2',
      name: 'Sarah Johnson',
      title: 'CTO',
      children: [
        { id: '4', name: 'Mike Brown', title: 'Lead Developer' },
        { id: '5', name: 'Emily Davis', title: 'Designer' },
      ],
    },
    {
      id: '3',
      name: 'David Wilson',
      title: 'CFO',
    },
  ],
};

const chart = new OrgChart({
  container: '#chart',
  data: data,
  theme: 'modern',
});

const chart = new OrgChart({
  // Required
  container: '#chart', // CSS selector or HTMLElement
  data: orgData, // Organization data

  // Optional
  theme: 'default', // 'default' | 'modern' | 'corporate' | 'minimal' | 'colorful' | Theme object
  direction: 'vertical', // 'vertical' | 'horizontal'
  nodeWidth: 200,
  nodeHeight: 100,
  levelSeparation: 80,
  siblingSeparation: 30,

  // Features
  features: {
    zoom: true,
    pan: true,
    drag: false,
    search: true,
    expand: true,
  },

  // Event callbacks
  onNodeClick: (node) => console.log('Clicked:', node),
  onNodeHover: (node) => console.log('Hover:', node),
  onNodeDrag: (node, x, y) => console.log('Drag:', node, x, y),

  // Custom node rendering
  renderNode: (node) => `<div class="my-node">${node.name}</div>`,
});

interface OrgNode {
  id: string;
  name: string;
  title?: string;
  image?: string;
  data?: Record<string, any>; // Custom data
  children?: OrgNode[];
}

// Data
chart.setData(newData); // Update chart data
chart.getNode(nodeId); // Get node by ID
chart.getAllNodes(); // Get all nodes

// Themes
chart.setTheme('corporate'); // Set theme by name
chart.setTheme(customTheme); // Set custom theme object
chart.getTheme(); // Get current theme

// Expand/Collapse
chart.expand(nodeId); // Expand specific node
chart.collapse(nodeId); // Collapse specific node
chart.toggleExpand(nodeId); // Toggle expand/collapse
chart.expandAll(); // Expand all nodes
chart.collapseAll(); // Collapse all nodes

// Zoom
chart.zoomIn(); // Zoom in
chart.zoomOut(); // Zoom out
chart.setZoom(1.5); // Set zoom level
chart.getZoom(); // Get current zoom
chart.resetZoom(); // Reset zoom to 1
chart.fitToScreen(); // Fit chart to container

// Search
chart.search('John'); // Search nodes
chart.clearSearch(); // Clear search highlights

// Export
await chart.exportPNG('my-chart.png');
chart.exportSVG('my-chart.svg');
chart.exportJSON('my-chart.json');

// Events
const unsubscribe = chart.on('nodeClick', (node) => {});
chart.off('nodeClick', callback);

// Cleanup
chart.destroy();

chart.on('nodeClick', (node) => {});
chart.on('nodeHover', (node) => {});
chart.on('nodeDrag', ({ node, x, y }) => {});
chart.on('nodeExpand', (node) => {});
chart.on('nodeCollapse', (node) => {});
chart.on('zoomChange', (scale) => {});
chart.on('searchResult', (nodes) => {});
chart.on('themeChange', (themeName) => {});

import { OrgChart, modernTheme, getTheme } from 'schartik';

// By name
const chart = new OrgChart({
  container: '#chart',
  data: data,
  theme: 'modern',
});

// By object
const chart = new OrgChart({
  container: '#chart',
  data: data,
  theme: modernTheme,
});

import { createTheme, defaultTheme } from 'schartik';

const myTheme = createTheme('default', {
  name: 'my-theme',
  node: {
    background: '#3498db',
    border: '#2980b9',
    borderRadius: 12,
  },
  text: {
    nameColor: '#ffffff',
    titleColor: '#ecf0f1',
  },
  connector: {
    stroke: '#3498db',
    type: 'curved',
  },
});

const chart = new OrgChart({
  container: '#chart',
  data: data,
  theme: myTheme,
});

interface Theme {
  name: string;
  node: {
    background: string;
    backgroundHover?: string;
    backgroundSelected?: string;
    border: string;
    borderWidth: number;
    borderRadius: number;
    shadow?: string;
    shadowHover?: string;
  };
  text: {
    fontFamily: string;
    nameSize: number;
    nameColor: string;
    nameWeight: string;
    titleSize: number;
    titleColor: string;
    titleWeight: string;
  };
  connector: {
    stroke: string;
    strokeWidth: number;
    type: 'straight' | 'curved' | 'step' | 'elbow';
    dashArray?: string;
  };
  animation: {
    duration: number;
    easing: string;
    nodeHover: boolean;
    expandCollapse: boolean;
  };
  imageSize?: number;
  imageBorderRadius?: number;
}

const chart = new OrgChart({
  container: '#chart',
  data: data,
  renderNode: (node) => `
    <div style="padding: 10px; text-align: center;">
      <img src="${node.image}" style="width: 50px; border-radius: 50%;" />
      <h3>${node.name}</h3>
      <p>${node.title}</p>
      ${node.data?.email ? `<small>${node.data.email}</small>` : ''}
    </div>
  `,
});