UI Компоненты

// Создание кнопки
const button = new Button({
    text: 'Primary Button',
    variant: 'primary',
    size: 'md',
    disabled: false,
    loading: false,
    onClick: () => console.log('Clicked!')
});

// Добавление на страницу
document.body.appendChild(button.render());

// Различные варианты кнопок
const variants = ['primary', 'secondary', 'outline', 'ghost', 'danger', 'success'];
variants.forEach(variant => {
    const btn = new Button({
        text: variant,
        variant: variant,
        onClick: () => alert(`${variant} clicked`)
    });
    container.appendChild(btn.render());
});

// Создание поля ввода
const input = new Input({
    type: 'text',
    placeholder: 'Введите текст',
    value: '',
    disabled: false,
    required: true,
    validation: {
        required: true,
        minLength: 3,
        maxLength: 50
    },
    onChange: (value) => console.log('Value:', value),
    onFocus: () => console.log('Focused'),
    onBlur: () => console.log('Blurred')
});

// Различные типы полей ввода
const types = ['email', 'password', 'number', 'tel', 'url'];
types.forEach(type => {
    const input = new Input({
        type: type,
        placeholder: `Введите ${type}`,
        validation: getValidationRules(type)
    });
    form.appendChild(input.render());
});

function getValidationRules(type) {
    const rules = {
        email: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
        password: { minLength: 6 },
        number: { min: 0, max: 100 },
        tel: { pattern: /^[\+]?[0-9\s\-\(\)]+$/ },
        url: { pattern: /^https?:\/\/.+/ }
    };
    return rules[type] || {};
}

// Создание карточки
const card = new Card({
    title: 'Заголовок карточки',
    content: 'Содержимое карточки с полезной информацией.',
    actions: [
        {
            text: 'Действие',
            variant: 'primary',
            onClick: () => console.log('Primary action')
        },
        {
            text: 'Отмена',
            variant: 'outline',
            onClick: () => console.log('Cancel action')
        }
    ],
    variant: 'default',
    elevation: 1
});

// Различные варианты карточек
const cardVariants = [
    {
        variant: 'elevated',
        title: 'Карточка с тенью',
        content: 'Карточка с повышенной тенью для акцента.'
    },
    {
        variant: 'outlined',
        title: 'Контурная карточка',
        content: 'Карточка с контуром вместо тени.'
    }
];

cardVariants.forEach(config => {
    const card = new Card(config);
    container.appendChild(card.render());
});

// Создание модального окна
const modal = new Modal({
    title: 'Заголовок модалки',
    content: 'Содержимое модального окна',
    size: 'md', // sm, md, lg, xl
    closeOnOverlayClick: true,
    closeOnEsc: true,
    showCloseButton: true,
    actions: [
        {
            text: 'Сохранить',
            variant: 'primary',
            onClick: () => {
                console.log('Сохранение...');
                modal.close();
            }
        },
        {
            text: 'Отмена',
            variant: 'outline',
            onClick: () => modal.close()
        }
    ]
});

// Открытие модалки
modal.open();

// Модальные окна разных размеров
const sizes = ['sm', 'md', 'lg', 'xl'];
sizes.forEach(size => {
    const modal = new Modal({
        title: `Modal ${size}`,
        content: `This is a ${size} modal window.`,
        size: size,
        actions: [
            {
                text: 'Close',
                variant: 'outline',
                onClick: () => modal.close()
            }
        ]
    });
    
    // Добавляем кнопку для открытия
    const button = new Button({
        text: size.toUpperCase(),
        onClick: () => modal.open()
    });
    container.appendChild(button.render());
});

// Создание компонента табов
const tabs = new Tabs({
    container: '#tabsContainer',
    tabs: [
        {
            id: 'profile',
            label: 'Профиль',
            content: '<h4>Профиль пользователя</h4><p>Информация о пользователе...</p>',
            active: true
        },
        {
            id: 'settings',
            label: 'Настройки',
            content: '<h4>Настройки системы</h4><p>Настройки приложения...</p>'
        },
        {
            id: 'notifications',
            label: 'Уведомления',
            content: '<h4>Уведомления</h4><p>Настройки уведомлений...</p>'
        }
    ],
    variant: 'default', // default, pills, underlined
    onChange: (activeTab) => {
        console.log('Active tab:', activeTab);
    }
});

// Создание аккордеона
const accordion = new Accordion({
    container: '#accordionContainer',
    items: [
        {
            title: 'Секция 1',
            content: '<p>Содержимое первой секции аккордеона.</p>',
            expanded: false
        },
        {
            title: 'Секция 2',
            content: '<p>Содержимое второй секции аккордеона.</p>',
            expanded: false
        },
        {
            title: 'Секция 3',
            content: '<p>Содержимое третьей секции аккордеона.</p>',
            expanded: true
        }
    ],
    allowMultiple: false,
    variant: 'default', // default, bordered, separated
    onToggle: (item, state) => {
        console.log(`Section "${item.title}" is ${state ? 'expanded' : 'collapsed'}`);
    }
});

// Создание выпадающего списка
const select = new Select({
    options: [
        { value: '', label: 'Выберите опцию', disabled: true },
        { value: '1', label: 'Опция 1' },
        { value: '2', label: 'Опция 2' },
        { value: '3', label: 'Опция 3' }
    ],
    placeholder: 'Выберите опцию',
    multiple: false,
    searchable: true,
    clearable: true,
    value: '',
    onChange: (value) => {
        console.log('Selected value:', value);
    }
});

// Множественный выбор
const multiSelect = new Select({
    options: [
        { value: '1', label: 'Опция 1' },
        { value: '2', label: 'Опция 2' },
        { value: '3', label: 'Опция 3' }
    ],
    multiple: true,
    placeholder: 'Выберите опции',
    onChange: (values) => {
        console.log('Selected values:', values);
    }
});

// Создание чекбоксов
const checkbox = new Checkbox({
    label: 'Чекбокс 1',
    checked: true,
    disabled: false,
    onChange: (checked) => {
        console.log('Checkbox checked:', checked);
    }
});

// Группа чекбоксов
const checkboxGroup = new CheckboxGroup({
    options: [
        { label: 'Опция 1', value: '1', checked: true },
        { label: 'Опция 2', value: '2', checked: false },
        { label: 'Опция 3', value: '3', checked: false }
    ],
    name: 'checkbox-group',
    onChange: (values) => {
        console.log('Selected values:', values);
    }
});

// Создание радиокнопок
const radioGroup = new RadioGroup({
    options: [
        { label: 'Радио 1', value: '1', checked: true },
        { label: 'Радио 2', value: '2', checked: false },
        { label: 'Радио 3', value: '3', checked: false }
    ],
    name: 'radio-group',
    onChange: (value) => {
        console.log('Selected value:', value);
    }
});

// Одиночная радиокнопка
const radio = new Radio({
    label: 'Радио кнопка',
    value: 'option1',
    checked: false,
    name: 'radio-group',
    onChange: (checked) => {
        console.log('Radio checked:', checked);
    }
});

// Создание слайдера
const slider = new Slider({
    min: 0,
    max: 100,
    value: 50,
    step: 1,
    disabled: false,
    showValue: true,
    onChange: (value) => {
        console.log('Slider value:', value);
    },
    onInput: (value) => {
        console.log('Slider input:', value);
    }
});

// Диапазонный слайдер
const rangeSlider = new RangeSlider({
    min: 0,
    max: 100,
    values: [25, 75],
    step: 1,
    showValues: true,
    onChange: (values) => {
        console.log('Range values:', values);
    }
});

// Создание хлебных крошек
const breadcrumbs = new Breadcrumbs({
    items: [
        { label: 'Главная', href: '/' },
        { label: 'Библиотека', href: '/library' },
        { label: 'Компоненты', href: '/components', active: true }
    ],
    separator: '/', // или '>', '→'
    showHome: true,
    homeIcon: '🏠',
    onClick: (item, index) => {
        console.log('Clicked:', item.label);
    }
});

// Создание пагинации
const pagination = new Pagination({
    totalItems: 150,
    itemsPerPage: 10,
    currentPage: 1,
    visiblePages: 5,
    showPrevNext: true,
    showFirstLast: true,
    prevText: '‹',
    nextText: '›',
    firstText: '«',
    lastText: '»',
    onPageChange: (page) => {
        console.log('Page changed to:', page);
        // Загрузка данных для страницы
        loadData(page);
    }
});

// Создание таблицы
const table = new Table({
    columns: [
        { key: 'id', label: 'ID', sortable: true },
        { key: 'name', label: 'Имя', sortable: true },
        { key: 'email', label: 'Email', sortable: true },
        { 
            key: 'status', 
            label: 'Статус',
            render: (value) => {
                const badgeClass = {
                    'active': 'badge-success',
                    'pending': 'badge-warning',
                    'inactive': 'badge-error'
                }[value];
                return `<span class="badge ${badgeClass}">${value}</span>`;
            }
        }
    ],
    data: [
        { id: 1, name: 'Иван Иванов', email: 'ivan@example.com', status: 'active' },
        { id: 2, name: 'Петр Петров', email: 'petr@example.com', status: 'pending' },
        { id: 3, name: 'Мария Сидорова', email: 'maria@example.com', status: 'inactive' }
    ],
    sortable: true,
    searchable: true,
    pagination: true,
    itemsPerPage: 10,
    onRowClick: (row) => {
        console.log('Row clicked:', row);
    },
    onSort: (column, direction) => {
        console.log('Sorted by:', column, direction);
    }
});

// Создание индикатора прогресса
const progress = new ProgressBar({
    value: 45,
    max: 100,
    variant: 'default', // default, success, warning, error
    showLabel: true,
    striped: false,
    animated: false,
    height: '8px',
    onComplete: () => {
        console.log('Progress completed!');
    }
});

// Анимированный прогресс
const animatedProgress = new ProgressBar({
    value: 75,
    variant: 'success',
    striped: true,
    animated: true,
    showLabel: true,
    labelPosition: 'inside' // inside, outside
});

// Создание уведомления
const alert = new Alert({
    message: 'Это информационное сообщение.',
    variant: 'info', // info, success, warning, error
    title: 'Информация!',
    dismissible: true,
    autoDismiss: false,
    duration: 5000,
    onDismiss: () => {
        console.log('Alert dismissed');
    }
});

// Показ уведомления
alert.show();

// Утилита для быстрого показа
Alert.show('Операция выполнена успешно!', 'success', 3000);

// Показ тоста
Toast.show('Сообщение успешно отправлено!', 'success', 3000);

// Создание кастомного тоста
const toast = new Toast({
    message: 'Пользователь создан успешно',
    variant: 'success',
    duration: 5000,
    position: 'top-right', // top-right, top-left, bottom-right, bottom-left
    showIcon: true,
    showClose: true,
    onClose: () => {
        console.log('Toast closed');
    }
});

// Различные варианты
Toast.success('Успешное выполнение!');
Toast.error('Произошла ошибка!');
Toast.warning('Внимание!');
Toast.info('Информационное сообщение');