import React, { useEffect, useState } from "react";
import styled from 'styled-components';
import { RestaurantCourseFilters, RestaurantCourses } from './Restaurant-menu';
import { useParams } from 'react-router-dom';
import { Button, Spin } from "antd";
import { PlusOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import { getMenu, makeCategories, makeCombo, makeIsFetching, makeMenu, makeService } from "../../Store";
import { createStructuredSelector } from "reselect";
import { FormattedMessage } from 'react-intl';
import messages from 'translations/messages';
const RestaurantNoneWrapper = styled.div`
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title {
    margin-bottom: 16px;
  }
`

const selectors = createStructuredSelector({
  isFetching: makeIsFetching(),
  service: makeService(),
  menu: makeMenu(),
  combo: makeCombo(),
  categories: makeCategories(),
});

export function RestaurantMenu(props) {
  const { type } = props;
  // @ts-ignore
  const { id } = useParams();
  const dispatch = useDispatch();
  const history = useHistory();
  const { menu, combo, categories, isFetching, service } = useSelector(selectors);
  const handleAddMenu = () => {
    history.push(`${history.location.pathname}/product`);
  };
  useEffect(() => {
    dispatch(getMenu(id));
  }, []);
  return (
    <Spin spinning={isFetching}>
      {
        combo && (
          combo.length > 0 ?
            <>
              <RestaurantCourseFilters categories={type !== 'combo' ? categories : []} type={type}/>
              <RestaurantCourses coursesList={type === 'menu' ? menu : type === 'combo' ? combo : service } />
            </>
            :
            <RestaurantNoneWrapper>
              <div className="title">{type === 'menu' ? <FormattedMessage {...messages.emptyMenu}/> : <FormattedMessage {...messages.emptyCombo}/>}</div>
              <Button
                size="large"
                type="primary"
                shape="circle"
                onClick={handleAddMenu}
                className="restaurant-course__add-button--tablet">
                <PlusOutlined />
              </Button>
            </RestaurantNoneWrapper>
        )
      }
    </Spin>
  )
}