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

const ApartmentSection = styled.section`
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
`;

const ApartmentSectionLeft = styled.div`
    display: flex;
    & img {
    }
`;

const ApartmentIcon = styled.img`
    width: 350px;
    height: 250px;
`

const Characteristics = styled.div`
    padding-left: 34px;
    & h3 {  
        font-weight: 600;
        font-size: 24px;
        color: #222;
    }
`;

const Address = styled.p`
    margin-top: 4px;
    font-size: 16px;
    color: #222;
`;

const TransportIcon = styled.div`
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: fit-content;
    height: 38px;
    border: 1px solid #A9A9A9;
    border-radius: 16px;
    margin-right: 8px;
    padding-right: 8px;
`;

const TransportSection = styled.div`
    display: flex;
    margin-top: 10px;
    & p {
        font-weight: 500;
        font-size: 15px;
        color: #A9A9A9;
    }
`;

const AmenitiesIcons = styled.td`
    width: fit-content;
    padding: 0 5px;
    border-right: 1px solid #e1e3e1;
    & ${SVGIcon} {
        display:inline-block;
    }
`;

const ActionButtons = styled.div`
    width: 500px;
    padding-top: 10px;
    display: flex
`;

const ActionButton = styled.div`
    width: 32px;
    height: 32px;
    margin-right: 10px;

    user-select: none;
    font-weight: 600;
    font-size: 16px;

    display: flex;
    align-items: center;

    border: 1px solid black;
    border-color: #e2e0e2 #e2e0e2 #d1cfd1;
    border-radius: 32px;

    box-shadow: 0 1px 1px #00000020;
`;

const ActionButtonText = styled.div``;

const ContactButton = styled(ActionButton)`
    width: fit-content;
    background: #E3F0FF;
    color: #007EFF;
    padding-right: 10px;
`;

const Price = styled.div``;

const ApartmentSectionRight = styled.div`
    text-align: right;
    & ${Price} {
        display: flex;
        justify-content: end;
        align-items: center;
    }
`;

const ApartmentDisplay = styled.p`
    color: gray;
`

const PayPeriod = styled(ApartmentDisplay)`
    font-size: 16px;
    margin-right: 18px
`;

const Description = styled(ApartmentDisplay)`
    margin-top: 48px;
    font-size: 15px;
    line-height: 18px;
    word-wrap: break-word;
`;

const DateDisplay = styled(ApartmentDisplay)`
    margin-top: 48px;
    font-size: 15px;
`;

const PriceArrow = (props) => {
    return (
        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"
            style={{transform: `rotate(${props.up ? 180 : 0}deg)`, marginRight: 4}}>
            <path d="M7 12L13.9282 0H0.0717969L7 12Z" fill={props.up ? "tomato" : "limegreen"} />
        </svg>
    );
}

/**
 * @param {{ results: import('../../API/Apartment').Apartment }} props 
 */
const CardApartament = function (props) {
    return (
        <ApartmentSection>
            <ApartmentSectionLeft>
                <ApartmentIcon src="/images/apartment.png"></ApartmentIcon>
                <Characteristics>
                    <h3>{props.results.perimetrs} м², {props.results.rooms == 0 ? '' : props.results.rooms}
                    
                        {props.results.rooms == 0 ? 'Гостинка' :
                            (props.results.rooms > 1 ? "-х комнатная" : " комнатная")
                        }
                        
                        </h3>
                    <Address>{props.results.address}, {props.results.floor} этаж из {props.results.floorHouse}</Address>
                    <TransportSection>
                        <TransportIcon>
                            <SVGIcon src='/images/icons/bus.svg' width={20} height={21} />
                            <p>{props.results.timeToBus} мин</p>
                        </TransportIcon>
                        <TransportIcon>
                            <SVGIcon src='/images/icons/train.svg' width={18} height={20} />                 
                            <p>{props.results.timeToTrain} мин</p>
                        </TransportIcon>
                    </TransportSection>
                    <div style={{height: 24}}></div>
                    <table>
                        <tbody>
                            <tr>
                                <AmenitiesIcons>
                                    <SVGIcon src='/images/icons/chair.svg' />
                                    <SVGIcon src='/images/icons/paw.svg' />
                                </AmenitiesIcons>                    
                                <AmenitiesIcons>
                                    <SVGIcon src='/images/icons/parking.svg' />
                                    <SVGIcon src='/images/icons/dish.svg' />
                                </AmenitiesIcons>                    
                                <AmenitiesIcons style={{borderRight:0}}>
                                    <SVGIcon src='/images/icons/burger.svg' />
                                    <SVGIcon src='/images/icons/game.svg' />
                                </AmenitiesIcons>
                            </tr>
                            <tr>
                                <AmenitiesIcons>
                                    <SVGIcon src='/images/icons/wifi.svg' />
                                    <SVGIcon src='/images/icons/paint.svg' />
                                </AmenitiesIcons>                    
                                <AmenitiesIcons>
                                    <SVGIcon src='/images/icons/recycle.svg' />
                                    <SVGIcon src='/images/icons/up-down-arrows.svg' />
                                </AmenitiesIcons>                    
                                <AmenitiesIcons style={{borderRight:0}}>
                                    <SVGIcon src='/images/icons/store.svg' />
                                    <SVGIcon src='/images/icons/drugs.svg' />
                                </AmenitiesIcons>
                            </tr>
                        </tbody>                                
                    </table>
                    <div style={{height: 12}}></div>
                    <ActionButtons>
                        {/* TODO: добавить проверку на авторизацию */}
                        <ContactButton>
                            <SVGIcon src='/images/icons/phone.svg' width={16} height={17} />
                            <ActionButtonText>Показать телефон</ActionButtonText>
                        </ContactButton>
                        <ActionButton>
                            <SVGIcon src='/images/icons/heart.svg' width={18} height={17} />
                        </ActionButton>
                        <ActionButton>
                            <SVGIcon src='/images/icons/stack.svg' width={18} height={19} />
                        </ActionButton>
                        <ActionButton>
                            <SVGIcon src='/images/icons/pencil.svg' width={16} height={17} />
                        </ActionButton>
                    </ActionButtons>
                </Characteristics>
            </ApartmentSectionLeft>
            <ApartmentSectionRight>
                <Price>
                    <PriceArrow up={props.results.lastPrice > props.results.price} />
                    
                    <h3>{props.results.price} ₽</h3>
                </Price>
                <PayPeriod>в месяц</PayPeriod>
                <Description>{props.results.description}</Description>
                <DateDisplay>{props.results.dateCreate}</DateDisplay>
            </ApartmentSectionRight>
        </ApartmentSection>
    );
}

export default CardApartament;