1.js

import React from 'react';
import styled from 'styled-components';
import last from 'lodash/last';
import moment from 'moment';

import Input from '../Input';
import Button from '../Button';
import ModalToggler from '../ModalToggler';
import Former from '../Former';

function round(date) {
  const momentObj = moment(date, ["HH:mm"])
  if (momentObj.millisecond() != 1){
    momentObj.subtract(1,'millisecond');
  }
  return momentObj.add(1, 'hour').startOf('hour');
}

const Modal = styled.div`
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 300px;
  position: relative;
  overflow: hidden;
  padding-bottom: 25px;
  padding-top: 5px;
  background: #FFF;

  width: 525px;
  height: 600px;
  box-shadow: 0 5px 15px rgba(0,0,0,.5),

  @media (max-width: 320px) {
    width: 100%;
  }

  @media only screen and (max-width: 1024px) and (orientation: portrait) {
    width: 300px;
    width: 550px;
  }
`;

const Title = styled.h2`
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  font-size: 35px;
  text-transform: uppercase;
  font-family: Playfair Display, serif;

  @media only screen and (max-width: 1024px) and (orientation: portrait) {
    font-size: 25px;
  }
`;

Modal.defaultProps = {
  onClick: (e) => e.stopPropagation()
}

const Header = styled.h3`
  padding: 0;
  margin: 0;
  margin-top: ${props => props.margin}px;
  margin-bottom: 5px;
  font-size: 16px;
  text-transform: uppercase;
  font-family: Playfair Display, serif;
`

Header.defaultProps = {
  margin: 40
}

const ConfirmButton = styled(Button)`
  margin-top: 45px;
  width: 80%;

  @media only screen and (max-width: 1024px) and (orientation: portrait) {
    font-size: 14px;
  }
`

ConfirmButton.defaultProps = {
  icon: 'check',
  type: 'submit'
}

const PartyName = styled(Input)`
  margin-top: -10px;
  z-index: -1;
`

const PartySize = styled(Input.Number)`
  margin-top: -15px;
  z-index: -1;
`

const RequestDate = styled(Input.Date)`
  margin-top: -10px;
  z-index: -1;
`

const RequestTime = styled(Input.Time)`
  margin-top: -10px;
  z-index: -1;
`

const partyName = (guestName) => {
  const names = guestName.match(/\w+/g)
  return last(names)
}

const MakeReservationModal = ({toggle, ...props}) => {
  const minDate = props.requestDateShift ? moment().add(props.requestDateShift, 'hours') : moment();
  const minTime = props.requestDateShift ? moment().add(props.requestDateShift, 'hours') : moment();

  const defaultValue = {
    party_size: props.occupants,
    party_name: partyName(props.guest_name),
    request_date: minDate,
    request_time: round(minTime).format('HH:mm'),
  }

  return (
    <Former defaultValue={defaultValue}>
      {
        (former) => (
          <form onSubmit={(e) => {
            e.preventDefault()
            former.onSubmit(props.onClick)
            toggle()
          }}>
            <Modal>
              <Title>Book Reservation</Title>

              <Header>Party name</Header>
              <PartyName
                value={former.form.party_name}
                onChange={former.handleChangeInput('party_name')}
              />

              <Header margin={20}>Party size</Header>
              <PartySize
                simple
                value={former.form.party_size}
                onChange={(value) => former.handleChange('party_size', value)}
              />

              <Header margin={20}>Date</Header>
              <RequestDate
                simple
                min={minDate}
                value={former.form.request_date}
                onChange={(value) => former.handleChange('request_date', value)}
              />

              <Header margin={20}>Time</Header>
              <RequestTime
                simple
                min={round(minTime).format('HH:mm')}
                value={former.form.request_time}
                onChange={(value) => former.handleChange('request_time', value)}
              />

              <ConfirmButton>
                Confirm Reservation
              </ConfirmButton>
            </Modal>
          </form>
        )
      }
    </Former>
  )
}

const Opener = styled(Button)`
  width: 220px;
`

Opener.defaultProps = {
  icon: 'vcard',
  secondary: true,
}

const MakeReservation = (props) => (
  <ModalToggler
    into="card-details"
    opener={({ toggle }) => (
      <Opener onClick={toggle}>
        Make Reservations
      </Opener>
    )}
    content={({toggle}) => (
      <MakeReservationModal
        toggle={toggle}
        {...props}
      />
    )}
  />
)

MakeReservation.Modal = MakeReservationModal
MakeReservation.Opener = Opener

export default MakeReservation;