import { useState } from 'react';
import { VirtualizedCheckboxList, CheckboxOption } from './VirtualizedCheckboxList';

/**
 * Example usage of VirtualizedCheckboxList
 * This demonstrates how to use the component with large datasets
 */

// Generate large dataset (200+ items)
const generateLargeDataset = (count: number): CheckboxOption[] => {
  return Array.from({ length: count }, (_, i) => ({
    label: `Option ${i + 1}`,
    value: `option-${i + 1}`,
  }));
};

export function BasicExample() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const options = generateLargeDataset(250);

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">Basic Usage</h2>
      <VirtualizedCheckboxList
        options={options}
        selectedValues={selectedValues}
        onSelectionChange={setSelectedValues}
      />
    </div>
  );
}

export function CustomizedExample() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const options: CheckboxOption[] = [
    { label: 'Brunette', value: 'brunette' },
    { label: 'Blonde', value: 'blonde' },
    { label: 'Red Hair', value: 'red' },
    { label: 'Black Hair', value: 'black' },
    { label: 'Auburn', value: 'auburn' },
    // ... add 195+ more options for realistic scenario
  ];

  return (
    <div className="p-4 max-w-md">
      <h2 className="text-xl font-bold mb-4">Hair Color Selector</h2>
      <VirtualizedCheckboxList
        options={options}
        selectedValues={selectedValues}
        onSelectionChange={setSelectedValues}
        containerHeight={500}
        itemHeight={44}
        searchPlaceholder="Search hair colors..."
        selectAllLabel="Select All Colors"
        clearAllLabel="Clear Selection"
        className="shadow-lg rounded-lg"
      />
    </div>
  );
}

export function WithPreselectedValues() {
  const [selectedValues, setSelectedValues] = useState<string[]>([
    'option-1',
    'option-5',
    'option-10',
  ]);
  const options = generateLargeDataset(300);

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">With Preselected Values</h2>
      <VirtualizedCheckboxList
        options={options}
        selectedValues={selectedValues}
        onSelectionChange={setSelectedValues}
        containerHeight={600}
      />
    </div>
  );
}

export function WithoutSelectedCount() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const options = generateLargeDataset(200);

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">Without Selected Count</h2>
      <VirtualizedCheckboxList
        options={options}
        selectedValues={selectedValues}
        onSelectionChange={setSelectedValues}
        showSelectedCount={false}
      />
    </div>
  );
}