import React, { useEffect, useState } from 'react';

import PaginatedTitle from '../UI/PaginatedTitle';
import BlockApartment from '../BlockApartment';

import ApartamentService from '../../API/ApartamentService';
import { useFetching } from '../../hooks/useFetching';
import { getPageCount } from '../../utils/Pages';

import styled from 'styled-components';
import SVGIcon from '../UI/Icon/SVGIcon';

const ApartmentSection = styled.section`
    display: flex;
    justify-content: space-between;
    padding-left: 3%;
`

const ApartmentSectionTitle = styled.div`
    width: 19%;
`

const ApartmentSectionTitleText = styled.h3`
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
`

const Separation = styled.div`
    margin-top: 86px;
`

const SeparationText = styled.p`
    margin-left: 3%;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
`

const SeparationLine = styled.div`
    height: 2px;
    margin-top: 8px;
    width: 100%; 
    background-color: #CCC;
`

const AboutSection = styled.section`
    display: flex;
    justify-content: space-between;
    margin-left: 3%;
`

const AboutTitle = styled.h3`
    margin-top: 33px;
    font-weight: 600;
    font-size: 16px;
`

const Indicator = styled.p`
    color: rgba(0, 0, 0, 0.5);
    margin-top: 33px;
    font-weight: 600;
    font-size: 16px;
`

const ColumnAbout = styled.div`
    width: 20%;
    text-align: center;
`

const ComparisonsApartmentsList = () => {
    const [apartmentsComparisons, setApartmentsComparisons] = useState([])
    const [totalPages, setTotalPages] = useState(0);
    const [page, setPage] = useState(1);
    const limit = 4;

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

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

    return (
        <>
            <PaginatedTitle title={"Сравнения квартир"} totalPages={totalPages} page={page} changePage={changePage} displayPages={true} />
            <ApartmentSection>
                <ApartmentSectionTitle>
                    <ApartmentSectionTitleText style={{height:300}}>Фото</ApartmentSectionTitleText>
                    <ApartmentSectionTitleText style={{height:1}}>Cтоимость</ApartmentSectionTitleText>
                    <ApartmentSectionTitleText style={{height:65}}>Адрес</ApartmentSectionTitleText>
                </ApartmentSectionTitle>
                {apartmentsComparisons.map((apartament, index) =>
                    <>
                        <BlockApartment results={apartament}/>
                    </> 
                )}
            </ApartmentSection>

            <Separation>
                <SeparationText>Характеристики</SeparationText>
                <SeparationLine></SeparationLine>
            </Separation>

            <AboutSection>
                <div>
                    <AboutTitle>Количество комнат</AboutTitle>
                    <AboutTitle>Этаж</AboutTitle>
                    <AboutTitle>Общая площадь</AboutTitle>
                    <AboutTitle>Санузел</AboutTitle>
                </div>
                {apartmentsComparisons.map((apartament, index) => 
                    <ColumnAbout>
                        <AboutTitle>{apartament.rooms === 0 ? "Гостинка" : (apartament.rooms)}</AboutTitle>
                        <AboutTitle>{apartament.floor} из {apartament.floorHouse}</AboutTitle>
                        <AboutTitle>{apartament.perimetrs} м²</AboutTitle>
                        <Indicator>{apartament.isBathroom ? '✓' : '—'}</Indicator>
                    </ColumnAbout>
                )}
            </AboutSection>

            <Separation>
                <SeparationText>Удобства</SeparationText>
                <SeparationLine></SeparationLine>
            </Separation>

            <AboutSection>
                <div>
                    <AboutTitle>Мебель</AboutTitle>
                    <AboutTitle>Интернет</AboutTitle>
                    <AboutTitle>Телевизор</AboutTitle>
                    <AboutTitle>Стиральная машинка</AboutTitle>
                    <AboutTitle>Холодильник</AboutTitle>
                    <AboutTitle>Кондиционер</AboutTitle>
                    <AboutTitle>Можно с детьми</AboutTitle>
                    <AboutTitle>Можно с животными</AboutTitle>
                    <AboutTitle>Свежий ремонт</AboutTitle>
                </div>
                {apartmentsComparisons.map((apartament, index) => 
                    <ColumnAbout>
                        <Indicator>{apartament.isFurniture ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isInternet ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isTelevision ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isWasher ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isRefrigerator ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isAirConditioning ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isChild ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isAnimal ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isFreshRepair ? '✓' : '—'}</Indicator>
                    </ColumnAbout>
                )}
            </AboutSection>

            <Separation>
                <SeparationText>О здании</SeparationText>
                <SeparationLine></SeparationLine>
            </Separation>

            <AboutSection>
                <div>
                    <AboutTitle>Высота потолков</AboutTitle>
                    <AboutTitle>Количество этажей</AboutTitle>
                    <AboutTitle>Лифт</AboutTitle>
                    <AboutTitle>Мусоропровод</AboutTitle>
                    <AboutTitle>Закрытая парковка</AboutTitle>
                    <AboutTitle>Охрана или консьерж</AboutTitle>
                </div>
                {apartmentsComparisons.map((apartament, index) => 
                    <ColumnAbout>
                        <AboutTitle>{apartament.ceilingHeight} м</AboutTitle>
                        <AboutTitle>{apartament.floorHouse}</AboutTitle>
                        <Indicator>{apartament.isElevator ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isGarbageChute ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isParking ? '✓' : '—'}</Indicator>
                        <Indicator>{apartament.isConcierge ? '✓' : '—'}</Indicator>
                    </ColumnAbout>
                )}
            </AboutSection>
        </>
    );
};

export default ComparisonsApartmentsList;