import React, { useEffect, useState } from 'react';
import ApartamentService from '../../API/ApartamentService';
import {useFetching} from '../../hooks/useFetching';
import {getPageCount, getPagesArray} from '../../utils/Pages';

import CardSmallApartament from '../../components/CardSmallApartament/CardSmallApartament';

import './styles/LastView.css';

const LastView = function () {
    const [apartamentsLastView, setApartamentsLastView] = useState([])
    const [totalPages, setTotalPages] = useState(0);
    const [page, setPage] = useState(1);
    const limit = 1;
    const [totalCount, setTotalCount] = useState(0);

    const [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => {
        let offset = (page - 1)  * limit;
        const response = await ApartamentService.getAll(limit, offset);
        setApartamentsLastView(response.data.results)
        setTotalCount(response.data.count)
        setTotalPages(getPageCount(totalCount, limit))
    })
    
    useEffect(() => {
        fetchApartaments(limit)
    }, [page])

    const changePageLastView = (page) => {
        setPage(page)
    }

    return(
        <>
            <section className="viewedSection">
                <div className="viewedTittle">
                    <h2>Недавно просмотренные <span>{totalCount}</span></h2>
                    <div className="viewedBtnSection">
                        <button className="btnViewed">Посмотреть все Недавние</button>
                        <div className="viewedBtn">
                            <button className="btnPrevious" onClick={() => changePageLastView(page !== 1 ? page - 1 : page)}>
                                <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
                                </svg>                        
                            </button>
                            <button className="btnNext" onClick={() => changePageLastView(page < getPagesArray(totalPages).length ? page + 1 : page)}>
                                <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
                                </svg>                        
                            </button>
                        </div>
                    </div>
                </div>
                <div className="viewedBlock">
                    {isApartamentsLoading 
                        ?
                        <h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
                        :
                        <>
                        {apartamentsLastView.map((apartament, index) =>
                            <>
                                <CardSmallApartament key={index} results={apartament}/>
                            </> 
                        )}   
                        </> 
                    }
                </div>
            </section>
        </>
    );
}

export default LastView;