import React from 'react';
import styled from 'styled-components';
import compose from 'recompose/compose';
import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
import withProps from 'recompose/withProps';

import Header from 'components/registration/Header/Header';
import SearchForm from 'components/registration/SearchForm/SearchForm';
import Map from 'components/registration/Map/Map';
import NotFound from 'components/registration/NotFound/NotFound';
import SelectedSuggestionForm from 'components/registration/SelectedSuggestionForm/SelectedSuggestionForm';

const Container = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-bottom: 20px;
`;

const Registration = (props) => {
  const {
    onRegister, onSuggestionSelect, suggestion, notFound, setSuggestion, setNotFound, selectedPotentialUser,
    selectPotentialUser,
  } = props;
  return (
    <Container>
      <Header pageTitle="Найти свой дом"/>
      <SearchForm
        onSuggestionSelect={onSuggestionSelect}
        onNotFound={() => {
          setNotFound(true);
          setSuggestion(null);
          selectPotentialUser(null);
        }}
        onReset={() => {
          setNotFound(false);
          setSuggestion(null);
          selectPotentialUser(null);
        }}
      />
      {notFound && <NotFound onRegister={onRegister} />}
      {suggestion &&
      <SelectedSuggestionForm
        suggestion={suggestion}
        selectedPotentialUser={selectedPotentialUser}
        onSelect={selectPotentialUser}
        onRegister={onRegister}
        onJoin={() => console.log('join')}
      />}
      <Map />
    </Container>
  )
};

export default compose(
  withState('suggestion', 'setSuggestion', null),
  withState('selectedPotentialUser', 'selectPotentialUser', null),
  withState('notFound', 'setNotFound', false),
  withState('isRegister', 'setIsRegister', false),
  withHandlers({ onSuggestionSelect, onRegister }),
)(Registration);