import React from 'react';
import { Link } from 'react-router-dom';
import collectionData from './collection.json';
import { useTheme } from '../../ThemeContext';
import { getLanguage } from '../../Language/Language';
import { getString } from '../../Language/LanguageStrings';

const CollectionTable = () => {
    const { theme } = useTheme();

    function generatePath(language, category, name, page) {
        var categoryName = category.toLowerCase().replace(/\s+/g, '-');
        var pageName = page.toLowerCase().replace(/\s+/g, '-');

        // Construct the path
        const path = `/${language}/plamo/showcase/${categoryName}/${pageName}`;

        // Return JSX with the path inside an <a> tag
        return (
            <Link reloadDocument to={path}>
                {name}
            </Link>
        );
    }

    return (
        <table id="collectionTable" className={'table table-striped table-hover table-' + theme}>
            <thead>
                <tr>
                    <th>{getString('model_name')}</th>
                    <th>{getString('category')}</th>
                    <th>{getString('scale')}</th>
                    <th>{getString('manufacturer')}</th>
                    <th>{getString('released')}</th>
                    <th>{getString('purchase_date')}</th>
                    <th>{getString('purchase_store')}</th>
                    <th>{getString('purchase_price')}</th>
                </tr>
            </thead>
            <tbody>
                {collectionData.history                    
                    .map((item, index) => (                    
                        <tr key={index}>
                            <td>{item.published ? generatePath(getLanguage(), item.category,item.model_name, item.page_name) : item.model_name}</td>
                            <td>{item.category}</td>
                            <td>{item.scale}</td>
                            <td>{item.manufacturer}</td>
                            <td>{item.release}</td>
                            <td>{item.purchase_date}</td>
                            <td>{item.purchase_store}</td>
                            <td>{item.purchase_price}</td>
                        </tr>
                    ))
                }
            </tbody>
        </table>
    )
}

export default CollectionTable;
