import React from 'react';
import { getPreviousAndNextPage } from '../../../utils/Pages';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import SVGIcon from '../Icon/SVGIcon';

const TitleSection = styled.section`
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding: 0 3% 0 3%;
`;

const TitleSectionLeftAndRight = styled.div`
    display: flex;
    align-items: center;
    & h2 {
        margin: 0px;
        padding: 0px;
        margin-left: 31px;
        font-size: 24px;
        color: #222;
    }
`;

const ButtonBack = styled.button`
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 180px;
    height: 36px;
    color: #BABABA;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-size: 15px;
`;

const ButtonPreviousAndNext = styled.button`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
    margin-right: 10px;
`;

const PaginatedTitle = function ({title, totalPages, page, changePage, displayPages}) {
    let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);

    return(
        <TitleSection>
            <TitleSectionLeftAndRight>
                <Link to="/">
                    <ButtonBack>
                        <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>                   
                        Вернуться назад
                    </ButtonBack>
                </Link>
                <h2>{title}</h2>
            </TitleSectionLeftAndRight>
            
            <TitleSectionLeftAndRight>
                {
                    displayPages ?
                    <>
                        <ButtonPreviousAndNext onClick={() => changePage(previousPage)}>
                            <SVGIcon src='/images/icons/left-arrow.svg' width={9} height={16}/>                
                        </ButtonPreviousAndNext>
                        <ButtonPreviousAndNext onClick={() => changePage(nextPage)}>
                            <SVGIcon src='/images/icons/right-arrow.svg' width={9} height={16}/>                      
                        </ButtonPreviousAndNext>
                    </>
                    : null
                }
            </TitleSectionLeftAndRight>
        </TitleSection>
    );
}

export default PaginatedTitle;