import React, { memo, Fragment } from 'react';

import Geoservice from 'react-trendagent-ui/dist/components/UI/Geoservice';

import './static/styles';

const ViewMap = memo((apartment) => {
    function address() {
        if(apartment.view === 2) {
            return `${apartment.building.address.street}${apartment.building.address.house ? `, д.${apartment.building.address.house}` : ''}${apartment.building.address.housing ? `, к.${apartment.building.address.housing}` : ''}`;
        }

        return apartment.block.address;
    }

    return (
        <Fragment>
            <h2 className='preview-page__subtitle'>Вид из окон</h2>
            <div className='preview-map'>
                <Geoservice
                    value={apartment.building.geometry}
                    mapProvider='trend'
                    infrastructure={true}
                    sides={apartment.cardinals}
                    sidesCenter={apartment.sub_section_center || apartment.section_center}
                />
                {apartment.block.subways && apartment.block.subways.slice(0, 1).map((subway, key) => (
                    <div className='preview-map__metro' key={key}><span className='preview-map__metro__point' style={{ backgroundColor: subway.color }} />{subway.name}, {subway.distance_timing} минут {subway.distance_type === 1 ? 'пешком' : 'на транспорте'}, {apartment.block.region.name}, {address()}</div>
                ))}
            </div>
        </Fragment>
    );
});

export default ViewMap;