# LinkSelector Component - Quick Start Guide

## 5-Minute Integration Guide

### Step 1: Import Component (JavaScript)

```javascript
import { LinkSelector } from './components/LinkSelector.js';
```

### Step 2: Add Container (HTML)

```html
<div id="translation-links"></div>
```

### Step 3: Initialize Component (JavaScript)

```javascript
const linkSelector = new LinkSelector({
    container: '#translation-links',
    sourcePostId: 123,           // Current post ID
    targetLanguage: 'es',         // Target language
    onChange: (selectedLinks) => {
        console.log('Selected:', selectedLinks);
        // Save to database here
    }
});
```

### Step 4: Create REST API Endpoint (PHP)

```php
<?php
add_action('rest_api_init', function() {
    register_rest_route('multilingual-press-zone/v1', '/posts', [
        'methods' => 'GET',
        'callback' => 'mpz_search_posts',
        'permission_callback' => function() {
            return current_user_can('edit_posts');
        },
        'args' => [
            'search' => ['required' => true, 'type' => 'string'],
            'language' => ['required' => true, 'type' => 'string'],
            'post_type' => ['required' => true, 'type' => 'string'],
        ]
    ]);
});

function mpz_search_posts($request) {
    $search = sanitize_text_field($request->get_param('search'));
    $language = sanitize_text_field($request->get_param('language'));
    $post_types = explode(',', sanitize_text_field($request->get_param('post_type')));

    $query = new WP_Query([
        's' => $search,
        'post_type' => $post_types,
        'posts_per_page' => 10,
        'meta_query' => [[
            'key' => 'mpz_language',
            'value' => $language
        ]]
    ]);

    $results = [];
    foreach ($query->posts as $post) {
        $results[] = [
            'id' => $post->ID,
            'title' => $post->post_title,
            'post_type' => $post->post_type,
            'post_date' => get_the_date('Y-m-d', $post)
        ];
    }

    return $results;
}
```

That's it! You now have a fully functional link selector.

---

## Common Options

### With Pre-selected Links

```javascript
new LinkSelector({
    container: '#translation-links',
    sourcePostId: 123,
    targetLanguage: 'es',
    selectedLinks: [
        { id: 456, title: 'Existing Translation', post_type: 'post' }
    ]
});
```

### Custom Post Types

```javascript
new LinkSelector({
    container: '#translation-links',
    sourcePostId: 123,
    targetLanguage: 'fr',
    postTypes: ['post', 'page', 'product']
});
```

### Save to WordPress

```javascript
new LinkSelector({
    container: '#translation-links',
    sourcePostId: 123,
    targetLanguage: 'de',
    onChange: (selectedLinks) => {
        // Save via WordPress AJAX
        wp.ajax.post('save_translations', {
            post_id: 123,
            translations: selectedLinks,
            nonce: wpData.nonce
        });
    }
});
```

---

## API Methods

```javascript
// Get current selection
const links = linkSelector.getSelectedLinks();

// Set selection programmatically
linkSelector.setSelectedLinks([
    { id: 789, title: 'New Link', post_type: 'post' }
]);

// Clean up
linkSelector.destroy();
```

---

## WordPress Meta Box Integration

```php
<?php
// Add meta box
add_action('add_meta_boxes', function() {
    add_meta_box(
        'mpz_translations',
        'Translation Links',
        'mpz_translations_meta_box',
        ['post', 'page'],
        'side'
    );
});

function mpz_translations_meta_box($post) {
    wp_nonce_field('mpz_save_translations', 'mpz_nonce');

    // Get existing translations
    $translations = get_post_meta($post->ID, '_mpz_translations', true);
    $language = get_post_meta($post->ID, '_mpz_language', true);

    ?>
    <div id="mpz-link-selector"></div>
    <input type="hidden" id="mpz-translations-data" name="mpz_translations"
           value="<?php echo esc_attr(wp_json_encode($translations ?: [])); ?>">

    <script type="module">
        import { LinkSelector } from './components/LinkSelector.js';

        new LinkSelector({
            container: '#mpz-link-selector',
            sourcePostId: <?php echo $post->ID; ?>,
            targetLanguage: '<?php echo esc_js($language); ?>',
            selectedLinks: <?php echo wp_json_encode($translations ?: []); ?>,
            onChange: (links) => {
                document.getElementById('mpz-translations-data').value =
                    JSON.stringify(links);
            }
        });
    </script>
    <?php
}

// Save meta box
add_action('save_post', function($post_id) {
    if (!isset($_POST['mpz_nonce']) ||
        !wp_verify_nonce($_POST['mpz_nonce'], 'mpz_save_translations')) {
        return;
    }

    if (isset($_POST['mpz_translations'])) {
        $translations = json_decode(
            sanitize_text_field(wp_unslash($_POST['mpz_translations'])),
            true
        );
        update_post_meta($post_id, '_mpz_translations', $translations);
    }
});
```

---

## Keyboard Shortcuts

- **↓** Arrow Down - Move down in results
- **↑** Arrow Up - Move up in results
- **Enter** - Select highlighted item
- **Escape** - Close dropdown
- **Tab** - Navigate between fields

---

## Troubleshooting

### Search not working?
1. Check if REST API endpoint exists
2. Verify `wpApiSettings.nonce` is available
3. Check browser console for errors

### Results not displaying?
1. Verify API response format matches expected structure
2. Check if posts have language metadata set
3. Ensure posts are published (or adjust query)

### Styles not loading?
1. Run `npm run build` in admin directory
2. Check if SCSS compiled successfully
3. Verify main.scss imports link-selector

---

## Need More Info?

See **LinkSelector.README.md** for complete documentation.

---

**Quick Links:**
- [Full Documentation](./LinkSelector.README.md)
- [Usage Examples](./LinkSelector.example.js)
- [Demo Page](./LinkSelector.demo.html)
- [Implementation Summary](./LinkSelector.SUMMARY.md)