import React from 'react';
import Breadcrumbs from '../../../UI/Breadcrumbs';
import paintData from './paints.json';
import { useTheme } from '../../../ThemeContext';
import { getLanguage } from '../../../Language/Language';
import MarkdownPage from '../../markdownPage';
import { getString } from '../../../Language/LanguageStrings';

const PaintsPage = () => {
    const language = getLanguage();
    const { theme } = useTheme();

    return (
        <article className='main-page'>
            <Breadcrumbs separator=' > ' path="plamo">
                {['Plamo']}
            </Breadcrumbs>
            <MarkdownPage md={'Plamo/paints/' + language + '/paints.md'} />

            <section>
                <table id="collectionTable" className={'table table-' + theme}>
                    <thead>
                        <tr>
                            <th>{getString('colour')}</th>
                            <th>{getString('identifier')}</th>
                            <th>{getString('colour')}</th>
                            <th>{getString('type')}</th>
                            <th>{getString('manufacturer')}</th>
                            <th>{getString('name')}</th>
                            <th>{getString('stock')}</th>
                            <th>{getString('total')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {paintData.paints                    
                            .map((item, index) => (                    
                                <tr key={index}>
                                    <td style={{ backgroundColor: item.hex }}></td>
                                    <td>{item.identifier}</td>
                                    <td>{item.colour}</td>
                                    <td>{item.type}</td>
                                    <td>{item.manufacturer}</td>
                                    <td>{item.name}</td>
                                    <td>{item['current-stock']}</td>
                                    <td>{item.total}</td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </section>
        </article>
    )
}

export default PaintsPage;