// @flow
import React from 'react'
import {Link, NavLink} from 'react-router-dom'
import {compose} from 'redux'
import {connect} from 'react-redux'
import {stringify} from 'qs'
import {withHandlers, withState} from 'recompose'
import {withDataProviders} from 'data-provider'
import {
  cadastralInfoProvider,
  detailsProvider,
  assetDeclarationProvider,
} from '../../dataProviders/profileDataProviders'
import {
  paramsYearSelector,
  parsedAssetDeclarationsForYearSelector,
  politicianDetailSelector,
  assetDeclarationsSortedYearsSelector,
  politicianCadastralSelector,
  filteredCadastralInfoLengthSelector,
  paginatedCadastralInfoSelector,
  cadastralPageSelector,
  cadastralSearchSelector,
} from '../../selectors/profileSelectors'
import {locationSearchSelector} from '../../selectors'
import {DEFAULT_MAP_CENTER} from '../../constants'

import Cardboard from './components/Cardboard'
import DetailCadastralTable from './components/DetailCadastralTable'
import DetailAsset from './components/DetailAssets'
import MapContainer from './components/MapContainer'
import {Row, Col, Container} from 'reactstrap'

import './DetailPage.css'

import type {ContextRouter} from 'react-router-dom'
import type {RouterHistory} from 'react-router'
import type {State, PoliticianDetail, CadastralData, GeolocationPoint} from '../../state'
import type {ParsedAssetDeclarationsType} from '../../types/profileTypes'

export type ProfileDetailPageProps = {
  assetsYears: Array<string>,
  selectedYear: string,
  assets: ParsedAssetDeclarationsType,
  politician: PoliticianDetail,
  cadastral: CadastralData,
  paginatedCadastral: CadastralData,
  cadastralLength: number,
  cadastralPage: number,
  cadastralSearch: string,
  query: Object,
  history: RouterHistory,
  mapCenter: GeolocationPoint,
  goMap: (ProfileDetailPageProps) => Function, // TODO instead take map center from url
} & ContextRouter

const DetailPage = ({
  assetsYears,
  selectedYear,
  assets,
  politician,
  cadastral,
  paginatedCadastral,
  cadastralLength,
  cadastralPage,
  cadastralSearch,
  query,
  history,
  mapCenter,
  goMap,
}: ProfileDetailPageProps) => (
  <Container>
    <Row tag="header" key="title" className="header profile-header">
      <Col>
        <h1 className="title">
          <NavLink to="/profil">
            <span className="bolder">profil</span>.verejne.digital
          </NavLink>
        </h1>
      </Col>
    </Row>
    <Cardboard key="cardboard" politician={politician} />,
    <Row tag="article" key="politician" className="profile">
      <Col tag="section">
        <div className="profile-tabs">
          {assetsYears.map((y) => (
            <Link
              to={{search: stringify({...query, year: y})}}
              className={y === selectedYear ? 'tab active' : 'tab'}
              key={y}
            >
              {y}
            </Link>
          ))}
        </div>
        <section>
          <DetailAsset
            assets={assets.unmovable_assets}
            year={selectedYear}
            title="Majetkové priznanie: Nehnuteľnosti"
            image={`https://verejne.digital/img/majetok/${politician.surname}_${
              politician.firstname
            }.png`}
            source={assets.source}
          />
        </section>
        <section>
          <DetailAsset
            assets={assets.movable_assets}
            year={selectedYear}
            title="Majetkové priznanie: Hnuteľný majetok"
            source={assets.source}
          />
        </section>
        <section>
          <DetailAsset
            assets={assets.income_assets}
            year={selectedYear}
            title="Majetkové priznanie: ostatné"
            source={assets.source}
          />
        </section>
      </Col>
      <Col tag="section">
        <DetailCadastralTable
          cadastral={paginatedCadastral}
          cadastralLength={cadastralLength}
          currentPage={cadastralPage}
          search={cadastralSearch}
          query={query}
          history={history}
          onParcelShow={goMap}
        />
      </Col>
    </Row>
    <Row key="map" className="profile-map">
      <Col>
        <MapContainer assets={cadastral} center={mapCenter} />
      </Col>
    </Row>
  </Container>
)

export default compose(
  withDataProviders(({match: {params: {id}}}) => [
    detailsProvider(id),
    cadastralInfoProvider(id),
    assetDeclarationProvider(id),
  ]),
  connect((state: State, props: ContextRouter) => ({
    selectedYear: paramsYearSelector(state, props),
    assetsYears: assetDeclarationsSortedYearsSelector(state, props),
    assets: parsedAssetDeclarationsForYearSelector(state, props),
    politician: politicianDetailSelector(state, props),
    cadastral: Object.values(politicianCadastralSelector(state, props)),
    paginatedCadastral: paginatedCadastralInfoSelector(state, props),
    cadastralLength: filteredCadastralInfoLengthSelector(state, props),
    cadastralPage: cadastralPageSelector(state, props),
    cadastralSearch: cadastralSearchSelector(state, props),
    query: locationSearchSelector(state, props),
  })),
  withState('mapCenter', 'setMapCenter', DEFAULT_MAP_CENTER),
  withHandlers({
    goMap: (props) => (parcel) => {
      props.setMapCenter({lat: parcel.lat, lng: parcel.lon})
    },
  })
)(DetailPage)

@@ -819,16 +819,30 @@
 P_CENTER
+, COUNTRY_ZOOM
 %7D from '
@@ -1802,16 +1802,35 @@
 nPoint,%0A
+  mapZoom: number,%0A
   goMap:
@@ -2124,24 +2124,35 @@
  mapCenter,%0A
+  mapZoom,%0A
   goMap,%0A%7D: 
@@ -4146,16 +4146,25 @@
 ey=%22map%22
+ id=%22map%22
  classNa
@@ -4252,16 +4252,31 @@
 pCenter%7D
+ zoom=%7BmapZoom%7D
  /%3E%0A    
@@ -5229,16 +5229,68 @@
 ENTER),%0A
+  withState('mapZoom', 'setMapZoom', COUNTRY_ZOOM),%0A
   withHa
@@ -5395,16 +5395,169 @@
 l.lon%7D)%0A
+      props.setMapZoom(15)%0A      const mapElement = document.getElementById('map')%0A      if (mapElement) mapElement.scrollIntoView(%7Bbehavior: 'smooth'%7D)%0A
     %7D,%0A 

Fix map on detail page