import React from 'react'
import axios from 'axios'
import WorksTableRow from './WorksTableRow.jsx'

export default function WorksTable ({
    showWorkSelector,
    showPriceSelector,
    works,
    handleSelectWorkEdition,
    handleSelectPrice
}) {
    const handleChangeForIndex = (index) => {
        return (index, value) => {
            if (handleSelectWorkEdition) {
                handleSelectWorkEdition(index, value)
            }
        }
    }

    const handleSelectPriceForIndex = (index) => {
        return (index, value) => {
            if (handleSelectPrice) {
                handleSelectPrice(index, value)
            }
        }
    }
    return (
        <table className={'table table-striped table-bordered'}>
            <thead>
            <tr>
                <th scope={'col'}>Foto</th>
                <th scope={'col'}>Título</th>
                <th scope={'col'}>Artista</th>
                <th scope={'col'}>Año</th>
                <th scope={'col'}>Técnica</th>
                <th scope={'col'}>Dimensiones</th>
                <th scope={'col'}>Precios</th>
                {showWorkSelector && <th scope={'col'}>Mi obra en Exhibify/ITGallery</th>}
            </tr>
            </thead>
            <tbody>
            {works.map((work, index) => (
                <WorksTableRow
                    key={index}
                    index={index}
                    work={work}
                    showWorkSelector={showWorkSelector}
                    showPriceSelector={showPriceSelector}
                    selectPriceForIndex={handleSelectPriceForIndex(index)}
                    selectWorkForIndex={handleChangeForIndex(index)}
                />
            ))}
            </tbody>
        </table>
    )
}
