import { Button } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import Select from '../../input/Select.jsx';
import useTypeFilter from '../hooks/LinesFilterHook';
// import useTitlesFilter from '../hooks/LinesFilterTitlesHook';
import useLines from '../hooks/LinesHook';
import LinesTable from './LinesTable.jsx';
import LinesTableRow from './LinesTableRow.jsx';
import useCart from '../../cart/CartHook';

const Lines = () => {
    const { types, currentFilter, handleFilterChange } = useTypeFilter();

    const { lines } = useLines(currentFilter);

    // const { lines1 } = useTitlesFilter(currentFilter) ? : null;

    // const combinedLines = [...lines, ...lines1];

    const { addToCart } = useCart();

    const navigate = useNavigate();

    const showEditPage = (id) => {
        navigate(`/page-edit/${id}`);
    };

    const showInfoPage = (id) => {
        navigate(`/info/${id}`);
    };
    // Результат получения данных о пользователе
    const storedUserData = localStorage.getItem('user');
    // Преобразованные данные 
    const storedUser = storedUserData ? JSON.parse(storedUserData) : {};
    const userName = storedUser && storedUser.name ? storedUser.name : '';
    const isAdmin = userName.toLowerCase() === 'admin';

    return (
        <>
            {isAdmin ? (
            <div className="d-flex flex-row-reverse">
                <div className = "pt-2">
                    <Button className="pt-2 button_add_game" as={Link} to = "/page-edit"> + </Button>
                </div>
            </div>
            ) : (
                <>
                </>
            )}

            <Select className='mt-2' values={types} label='Фильтр по жанру'
                value={currentFilter} onChange={handleFilterChange} />
            <LinesTable>
                {
                    lines.map((line, index) =>
                        <LinesTableRow key={line.id}
                            index={index} line={line}
                            onAddCart={() => addToCart(line)}
                            toInfoPage={() => showInfoPage(line.id)}
                        />)
                }
            </LinesTable>
        </>
    );
};

export default Lines;