import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd';
import { DragArea, DropBox, Floors } from './Restaurant-area';
import { fetchAPI } from 'utils/fetchAPI';
import { FLOORS } from 'containers/App/urls';
import { useParams, useHistory } from 'react-router-dom';
import { FloorModel } from 'containers/Restaurant/Store/types';
import { FormattedMessage } from 'react-intl';
import messages from 'translations/messages';

const RestaurantAreaWrapper = styled.div`
  display: flex;
  @media (max-width: 576px) {
    display: block;
  }
`;

export function RestaurantArea() {
  const [loading, setLoading] = useState(true);
  const [floorList, setFloorList] = useState<FloorModel[]>([]);
  // @ts-ignore
  const { id } = useParams();
  const getFloors = async () => {
    try {
      const response = await fetchAPI({
        method: 'GET',
        url: `${FLOORS}?restaurantId=${id}`,
      });
      if (response) {
        setFloorList(response);
        setLoading(false);
      }
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    getFloors();
  }, []);
  if (loading) {
    return <div><FormattedMessage {...messages.loading}/></div>;
  }
  return (
    <DndProvider backend={Backend}>
      <Floors
        floorList={floorList}
        getFloors={getFloors}
      />
      <RestaurantAreaWrapper>
        <DragArea />
        <DropBox floorList={floorList} />
      </RestaurantAreaWrapper>
    </DndProvider>
  );
}