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

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

import './static/styles';


export default class ViewMap extends PureComponent {
    state = {
        isUpdate: false
    }

    componentDidUpdate(prevProps, prevState) {
        if (JSON.stringify(this.state.apartment) !== JSON.stringify(prevProps.apartment)) this.setState({ isUpdate: true });
        if (this.state.isUpdate !== prevState.isUpdate) this.setState({ isUpdate: false });
    }

    getAddress() {
        if(this.props.apartment.view === 2) {
            return `${this.props.apartment.building.address.street}${this.props.apartment.building.address.house ? `, д.${this.props.apartment.building.address.house}` : ''}${this.props.apartment.building.address.housing ? `, к.${this.props.apartment.building.address.housing}` : ''}`;
        }

        return this.props.apartment.block.address;
    }

    render() {
        return (
            <Fragment>
                <h2 className='preview-page__subtitle'>Вид из окон</h2>
                {!this.state.isUpdate &&
                    <div className='preview-map'>
                        <Geoservice
                            value={this.props.apartment.building.geometry}
                            mapProvider='trend'
                            infrastructure={true}
                            sides={this.props.apartment.cardinals}
                            sidesCenter={this.props.apartment.sub_section_center || this.props.apartment.section_center}
                        />
                        {this.props.apartment.block.subways && this.props.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 ? 'пешком' : 'на транспорте'}, {this.props.apartment.block.region.name}, {this.getAddress()}</div>
                        ))}
                    </div>
                }
            </Fragment>
        );
    }
}