import React from 'react';
import styled from 'styled-components';
import { HEADER_HEIGHT, MOBILE_BREAK_POINT, TABLET_BREAK_POINT } from 'styles/constants';
import { RestaurantInfo, RestaurantTabs } from './Restaurant-details';
import { RestaurantStaffs } from './Restaurant-details/restaurantStaffs';
import { useInjectReducer, useInjectSaga } from 'redux-injectors';
import reducer from './Store/reducer';
import saga from './Store/saga';
const RestaurantDetailsWrapper = styled.div`
  /* height: calc(100vh - ${HEADER_HEIGHT}); */
  display: flex;
  height: 100%;
  .restaurant-detail {
    width: calc(100vw - 25%);
    background-color: #FFFFFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    margin-right: 10px;
    overflow: hidden;
  }
  .staff-list {
    width: 25%;
    background-color: #FFFFFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
  }
  @media only screen and (max-width: ${TABLET_BREAK_POINT}px){
    display: flex;
    flex-wrap: wrap;
    .restaurant-detail {
      width: 100%;
      margin: 0;
    }
    .staff-list {
      width: 100%;
    }
  }
  `;

export function RestaurantDetails(props) {
  useInjectReducer({ key: 'restaurant', reducer: reducer });
  useInjectSaga({ key: 'restaurant', saga: saga });
  return (
    <RestaurantDetailsWrapper>
      <div className="restaurant-detail">
        <RestaurantInfo />
        <RestaurantTabs />
      </div>
      <div className="staff-list">
        <RestaurantStaffs />
      </div>
    </RestaurantDetailsWrapper>
  );
}