offer.jsx

import * as React from 'react'
import { StickyContainer, Sticky } from 'react-sticky'
import { OfferSection, OfferSidebar, OfferInformationForm } from 'components/pages/offer'
import { Layout } from 'components/shared'
import { OfferPageContext } from 'context'
import { getWindowOuterWidth } from 'libs'
import { breakpoint } from 'variables'

// eslint-disable-next-line import/no-default-export
export default class extends React.Component {
  state = {
    values: null,
    errors: null,
    windowOuterWidth: getWindowOuterWidth()
  }

  updateValuesAndErrors = ({ values, errors }) => {
    this.setState({ values, errors })
  }

  handleWindowResize = () => this.setState({ windowOuterWidth: getWindowOuterWidth() })

  componentDidMount() {
    this.setState({ windowOuterWidth: getWindowOuterWidth() })
    window.addEventListener('resize', this.handleWindowResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleWindowResize)
  }

  render() {
    const pageMetadata = {
      title: 'Offer',
      description: 'Offer'
    }

    const contextValue = {
      values: this.state.values,
      errors: this.state.errors,
      updateValuesAndErrors: this.updateValuesAndErrors
    }

    return (
      <OfferPageContext.Provider value={contextValue}>
        <Layout pageMetadata={pageMetadata} headerType="minimalistic">
          {
            this.state.windowOuterWidth < breakpoint.smMd
              ? (
                <OfferSection>
                  <StickyContainer>
                    <Sticky>
                      {({ style }) => (
                        <div style={{ ...style, zIndex: 9 }}>
                          <OfferSidebar />
                        </div>
                      )}
                    </Sticky>
                    <OfferInformationForm />
                  </StickyContainer>
                </OfferSection>
              )
              : (
                <OfferSection>
                  <OfferSidebar />
                  <OfferInformationForm />
                </OfferSection>
              )
          }
        </Layout>
      </OfferPageContext.Provider>
    )
  }
}