import React, { useEffect, useState } from 'react';
import ApartamentService from '../../API/ApartamentService';

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

import { useFetching } from '../../hooks/useFetching';
import { useParams } from 'react-router-dom';
import { Container, Row, Col, Stack } from 'react-bootstrap';

import AwesomeSlider from 'react-awesome-slider';
import AwsSliderStyles from 'react-awesome-slider/src/styles?inline';

import 'bootstrap/dist/css/bootstrap-grid.min.css';

const SVGIcon = styled(ISVGIcon)`
    margin-left: 0px;
    margin-right: 0px;
`;

const ContainerLeft = styled.div`
    max-width: 800px;
`

const ContainerSlider = styled.div`
    max-width: 800px;
    max-height: 500px;

    clip-path: inset(0% 0% 5% 0% round 20px);
`

const DateCreateAndViews = styled.div`
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
    color: #C0C0C0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    & span {
        margin-left: 15px;
        font-size: 15px;
        line-height: 18px;
        font-weight: 300;
        color: #C0C0C0;
    }
`

const PerimetrsAndRooms = styled.h3`
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 10px;
`

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

const ButtonComparisons = styled.button`
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    width: 201px;
    height: 28px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 12px;
`

const PriceDescription = styled.div`
    background: #E3F0FF;
    border-radius: 20px;
    padding: 13px 16px 11px 17px;
`

const PriceTitleText = styled.p`
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 15px;
`

const PriceText = styled.h3`
    font-size: 15px;
    line-height: 18px;
    text-align: end;
`

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

const AdditionalItem = styled.div`
    max-width: 256px;
    max-height: 160px;
    background: #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 20px;
    padding: 8px;


    &:hover {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
`

const AdditionalImage = styled.img`
    width:100%;
    max-height: 120px;
    margin-bottom: 4px;
    border-radius: 12px;
`

const AdditionalText = styled.p`
    font-weight: 500;
    font-size: 16px;
    line-height: 15px;
`

const AdditionalTextSpan = styled.span`
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #BABABA;
`

const DescriptionTitle = styled.h3`
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    padding-left: 0px;
    margin-top: 35px;
    margin-bottom: 10px;
`

const Description = styled.p`
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
`

const RentButton = styled.button`
    background: #007EFF;
    border-radius: 12px;
    height: 36px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-weight: 500;
    font-size: 16px;
    line-height: 19px;

    color: #FFFFFF;

    &:hover {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
`

const ContactButton = styled.button`
    border-radius: 12px;
    background: #2348CC;
    height: 36px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;

    &:hover {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
`

const InputNote = styled.input`
    border: 1px solid #CCCCCC;
    border-radius: 12px;
    height: 36px;
    width: 100%;

    font-weight: 500;
    font-size: 15px;
    line-height: 18px;

    padding-left: 46px;

    &::placeholder {
        font-weight: 500;
        font-size: 15px;
        line-height: 18px;
        color: #CCCCCC;
    }
`

const ApartmentParametersSection = styled.div`
    align-items: center;
    justify-content: center;
    text-align: center;
`

const ApartmentParametersText = styled.p`
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
`

const ApartmentParametersTextSmall = styled(ApartmentParametersText)`
    font-size: 15px;
    line-height: 18px;
`

const ApartmentParametersTitle = styled.p`
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #C0C0C0;
`

const NoteSection = styled.div`
    position: relative;

    & input {
        padding-left: 30px;
        background-image: url("/images/icons/pencil-gray.svg");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 8px 0.6rem;
    }
`

const ApartmentParametersTable = styled.table`
    margin-left: 15px;
    width: 100%;

    & td {
        padding-top: 19px;
    }
`

const PriceBlock = (props) => {
    return (
        <Row>
            <Col xs={props.columnsize}>
                <PriceTitleText>{props.title}</PriceTitleText>
            </Col>
            <Col className='end'>
                <PriceText>
                    {props.price}
                </PriceText>
            </Col>
        </Row>
    );
}

const ApartmentParameters = (props) => {
    return (
        <Col>
            <ApartmentParametersSection>
                <ApartmentParametersText>{props.params}</ApartmentParametersText>
                <ApartmentParametersTitle>{props.title}</ApartmentParametersTitle>
            </ApartmentParametersSection>
        </Col>
    );
}

const ApartmentParametersIconized = (props) => {
    return (
        <Row style={{marginBottom: 16}}>
            <Col xs={2} className='d-flex justify-content-center'>
                <SVGIcon src={props.icon} width={props.width} height={props.height}/>
            </Col>
            <Col>
                <ApartmentParametersTextSmall>{props.text}</ApartmentParametersTextSmall>
            </Col>
        </Row>
    );
}

const ApartmentParametersDoubleLine = (props) => {
    return (
        <Row>
            <Col xs={1}>
                <SVGIcon src={props.iconFirst} width={20} height={20}/>
            </Col>
            <Col xs={5}>
                <ApartmentParametersTextSmall>{props.textFirst}</ApartmentParametersTextSmall>
            </Col>
            <Col xs={1}>
                <SVGIcon src={props.iconSecond} width={20} height={20}/>
            </Col>
            <Col xs={5}>
                <ApartmentParametersTextSmall>{props.textSecond}</ApartmentParametersTextSmall>
            </Col>
        </Row>
    );
}

const IndexApartment = function () {
    const params = useParams();
    const apartmentID = params.id;

    const [apartment, setApartment] = useState([])

    const [fetchApartment, isApartmentLoading, apartmentError] = useFetching(async (apartmentID) => {
        const response = await ApartamentService.getById(apartmentID);
        setApartment(response.data)
    })

    useEffect(() => {
        fetchApartment(apartmentID)
    }, [])

    return(
        <Container fluid="xl" style={{marginBottom: 50, marginTop: 50}}>
            <Row>
                <Col xs={8}>
                    <Stack>
                        <ContainerLeft>
                            <ContainerSlider>
                                <AwesomeSlider cssModule={AwsSliderStyles} bullets={false}>
                                    <div data-src='/images/house-s.jpg'/>
                                    <div data-src='/images/house-s-2.jpg'/>
                                </AwesomeSlider>
                            </ContainerSlider>
                            <Row>
                                <Col xs={4}>
                                    <AdditionalItem>
                                        <AdditionalImage src='/images/plan.png'/>
                                        <AdditionalText>Планировка</AdditionalText>
                                        <AdditionalTextSpan>Схема помещений</AdditionalTextSpan>
                                    </AdditionalItem>
                                </Col>
                                <Col xs={4}>
                                    <AdditionalItem>
                                        <AdditionalImage src='/images/location.png'/>
                                        <AdditionalText>Расположение</AdditionalText>
                                        <AdditionalTextSpan>Показать на карте</AdditionalTextSpan>
                                    </AdditionalItem>
                                </Col>
                                <Col xs={4}>
                                    <AdditionalItem>
                                        <AdditionalImage src='/images/panorama.png'/>
                                        <AdditionalText>Панорама</AdditionalText>
                                        <AdditionalTextSpan>Обзор вокруг</AdditionalTextSpan>
                                    </AdditionalItem>
                                </Col>
                            </Row>
                            <div>
                                <DescriptionTitle>Описание</DescriptionTitle>
                                <Description>{apartment.description}</Description>
                            </div>
                            <RelatedApartment/>
                            <LastView/>
                        </ContainerLeft>
                    </Stack>
                </Col>
                <Col xs={4}>
                    <Stack>
                        <div style={{marginBottom: 12}}>
                            {/* TODO: Добавить параметр кол-ва просмотров */}
                            <DateCreateAndViews>
                                {apartment.dateCreate} <span>78</span> <SVGIcon style={{marginLeft: 5}}src='/images/icons/eye.svg' width={16} height={10}></SVGIcon>
                            </DateCreateAndViews>
                        </div>
                        <PerimetrsAndRooms>{apartment.perimetrs} м², {apartment.rooms == 0 ? '' : apartment.rooms}
                    
                            {apartment.rooms == 0 ? 'Гостинка' :
                                (apartment.rooms > 1 ? "-х комнатная" : " комнатная")
                            }
                                
                        </PerimetrsAndRooms>
                        <div>
                            <Row>
                                <Col xs={10}>
                                    <h1 style={{marginBottom: 12}}>{apartment.price} ₽ / мес.</h1>
                                </Col>
                                <Col xs={2}>
                                    <ButtonFavorites>
                                        <SVGIcon src='/images/icons/heart.svg' width={18} height={16}/>
                                    </ButtonFavorites>
                                </Col>
                            </Row>
                        </div>
                        <ButtonComparisons>
                            <SVGIcon style={{marginRight: 5}} src='/images/icons/stats.svg' width={16} height={12}/>
                            Добавить к сравнению
                        </ButtonComparisons>
                        <PriceDescription>
                            <Stack>
                                <PriceBlock columnsize={9} title={"Оплата в первый месяц"} price={`${apartment.price} ₽`}/>
                                <PriceBlock columnsize={9} title={"Залог"} price={`${apartment.bail} ₽`}/>
                                <PriceBlock columnsize={9} title={"Комиссия агенству"} price={`${apartment.agencyCommission} ₽`}/>
                                <PriceBlock columnsize={9} title={"Коммун. услуги"} price={`${apartment.utilitiesPrice}`}/>
                            </Stack>
                            <SeparationLine/>
                            <Stack>
                                <PriceBlock columnsize={8} title={"Итого"} price={`${apartment.price + apartment.bail + apartment.agencyCommission} ₽ + КУ`}/>
                                <PriceBlock columnsize={9} title={"Мин. срок аренды"} price={`${apartment.minimumLeasePeriod} мес.`}/>
                            </Stack>
                        </PriceDescription>
                        <Row style={{marginTop: 14}}>
                            <Col xs={7}>
                                <RentButton>
                                    <SVGIcon style={{marginRight: 5}} src='/images/icons/two-people.svg' width={20} height={16}/>
                                    Снимать вдвоём
                                </RentButton>
                            </Col>
                            <Col>
                                <RentButton>
                                    <SVGIcon style={{marginRight: 5}} src='/images/icons/people.svg' width={14} height={16}/>
                                    Снять
                                </RentButton>
                            </Col>
                        </Row>
                        <ContactButton style={{marginTop: 12}}>
                            <SVGIcon style={{marginRight: 5}} src='/images/icons/phone-white.svg' width={16} height={16}/>
                            Показать телефон +7 (xxx) xxx-xx-xx
                        </ContactButton>
                        <NoteSection>
                            <InputNote style={{marginTop: 12}} placeholder='Добавить заметку'/>
                        </NoteSection>
                        <SeparationLine style={{marginTop: 17}}/>
                        <Row>
                            <ApartmentParameters params={`${apartment.perimetrs} м²`} title={"общая"}/>
                            <ApartmentParameters params={`${apartment.ceilingHeight} м`} title={"потолки"}/>
                            <ApartmentParameters params={`${apartment.floor} этаж`} title={`из ${apartment.floorHouse}`}/>
                        </Row>
                        <SeparationLine/>
                        <ApartmentParametersTable>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/chair-dark.svg'} textFirst={"Мебель"} 
                                                                    iconSecond={'/images/icons/paw-dark.svg'} textSecond={"Можно с питомцем"}/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/tv-dark.svg'} textFirst={"Телевизор"} 
                                                                    iconSecond={'/images/icons/child-dark.svg'} textSecond={"Можно с детьми"}/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/wifi-dark.svg'} textFirst={"Интернет"} 
                                                                    iconSecond={'/images/icons/toilet-dark.svg'} textSecond={"Санузел"}/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/snowflake-dark.svg'} textFirst={"Холодильник"} 
                                                                    iconSecond={'/images/icons/socks-dark.svg'} textSecond={"Стиральная машина"}/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/fan-dark.svg'} textFirst={"Кондиционер"} 
                                                                    iconSecond={'/images/icons/paint-dark.svg'} textSecond={"Свежий ремонт"}/>
                                </td>
                            </tr>
                        </ApartmentParametersTable>
                        <SeparationLine style={{marginTop: 19}}/>
                        <ApartmentParametersTable>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/up-down-arrows-dark.svg'} textFirst={"Лифт"} 
                                                                    iconSecond={'/images/icons/parking-dark.svg'} textSecond={"Парковка"}/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <ApartmentParametersDoubleLine iconFirst={'/images/icons/recycle-dark.svg'} textFirst={"Мусоропровод"} 
                                                                    iconSecond={'/images/icons/dish-dark.svg'} textSecond={"Консьерж"}/>
                                </td>
                            </tr>
                        </ApartmentParametersTable>
                        <SeparationLine style={{marginTop: 19, marginBottom: 19}}/>
                        <ApartmentParametersIconized icon={'/images/icons/pin.svg'} width={12} height={20} text={apartment.address}/>
                        <ApartmentParametersIconized icon={'/images/icons/bus-dark.svg'} width={20} height={20} text={`${apartment.timeToBus} минут до остановки`}/>
                        <ApartmentParametersIconized icon={'/images/icons/train-dark.svg'} width={20} height={20} text={`${apartment.timeToTrain} минут до станции`}/>
                        <PriceDescription style={{marginTop: 18}}>
                            <Row>
                                <Col xs={2}>
                                    <SVGIcon style={{marginRight: 5}} src='/images/icons/thinking-face.svg' width={60} height={64}/>
                                </Col>
                                <Col>
                                    <h4 style={{marginBottom: 4}}>Не подходит квартира?</h4>
                                    Попробуйте сменить настройки поиска на главной странице.
                                </Col>
                            </Row>
                        </PriceDescription>
                    </Stack>
                </Col>
            </Row>
        </Container>
    );
}

export default IndexApartment;