import { defineStory, useBoolean, useSelect, useNumber } from '@djangocfg/playground';
import JsonTree from './index';

export default defineStory({
  title: 'Tools/Json Tree',
  component: JsonTree,
  description: 'Interactive JSON tree viewer with expand/collapse.',
});

const sampleData = {
  user: {
    id: 'usr_123',
    name: 'John Doe',
    email: 'john@example.com',
    roles: ['admin', 'user'],
    settings: {
      theme: 'dark',
      notifications: true,
      language: 'en',
    },
  },
  metadata: {
    createdAt: '2024-01-15T10:30:00Z',
    updatedAt: '2024-01-20T14:45:00Z',
    version: 2,
  },
};

const apiResponse = {
  status: 200,
  data: {
    vehicles: [
      { id: 1, make: 'BMW', model: 'X5', year: 2023, price: 65000 },
      { id: 2, make: 'Mercedes', model: 'GLE', year: 2022, price: 72000 },
      { id: 3, make: 'Audi', model: 'Q7', year: 2023, price: 68000 },
    ],
    pagination: {
      page: 1,
      perPage: 10,
      total: 156,
      hasMore: true,
    },
  },
  meta: {
    requestId: 'req_abc123',
    duration: 45,
  },
};

const nestedData = {
  level1: {
    level2: {
      level3: {
        level4: {
          level5: {
            value: 'deeply nested',
          },
        },
      },
    },
  },
};

const DATA_SAMPLES = {
  user: sampleData,
  api: apiResponse,
  nested: nestedData,
};

export const Interactive = () => {
  const [dataSource] = useSelect('dataSource', {
    options: ['user', 'api', 'nested'] as const,
    defaultValue: 'api',
    label: 'Data Source',
    description: 'Select JSON data to display',
  });

  const [showExpandControls] = useBoolean('showExpandControls', {
    defaultValue: true,
    label: 'Expand Controls',
    description: 'Show expand/collapse all buttons',
  });

  const [showActionButtons] = useBoolean('showActionButtons', {
    defaultValue: true,
    label: 'Action Buttons',
    description: 'Show copy/download buttons',
  });

  const [maxAutoExpandDepth] = useNumber('maxAutoExpandDepth', {
    defaultValue: 2,
    min: 0,
    max: 10,
    label: 'Auto Expand Depth',
    description: 'Maximum depth to expand automatically',
  });

  return (
    <div className="max-w-2xl h-96">
      <JsonTree
        data={DATA_SAMPLES[dataSource]}
        config={{
          maxAutoExpandDepth,
          showExpandControls,
          showActionButtons,
          className: 'h-full',
        }}
      />
    </div>
  );
};

export const Default = () => (
  <div className="max-w-2xl">
    <JsonTree data={sampleData} />
  </div>
);

export const APIResponse = () => (
  <div className="max-w-2xl">
    <JsonTree data={apiResponse} />
  </div>
);

export const DeepNesting = () => (
  <div className="max-w-2xl">
    <JsonTree data={nestedData} />
  </div>
);

export const CollapsedByDefault = () => (
  <div className="max-w-2xl h-96">
    <JsonTree data={apiResponse} config={{ maxAutoExpandDepth: 0, className: 'h-full' }} />
  </div>
);

export const WithMaxDepth = () => (
  <div className="max-w-2xl h-96">
    <JsonTree data={apiResponse} config={{ maxAutoExpandDepth: 2, className: 'h-full' }} />
  </div>
);
