import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Tabs, message } from 'antd';
import { RestaurantMenu, RestaurantArea } from './Restaurant-tabs';
import { useHistory } from 'react-router-dom';
import { getSearchParamValueByParams } from 'utils/searchParams';
import { FormattedMessage } from 'react-intl';
import messages from 'translations/messages';
import { searchMenu } from "../Store";
import { useDispatch } from "react-redux";
const RestaurantTabsWrapper = styled.div`
  padding: 10px;
`;

export function RestaurantTabs(props) {
  const { TabPane } = Tabs;
  const [activeTab, setActiveTab] = useState('1')
  const history = useHistory();
  const dispatch = useDispatch();
  useEffect(() => {
    const activeTab = getSearchParamValueByParams(history.location.search, 'activeTab');
    if (activeTab && activeTab !== '1') {
      setActiveTab(activeTab);
    }
  }, [])
  const setNewActiveTab = (key) => {
    const urlSearchParams = new URLSearchParams(history.location.search);
    urlSearchParams.set('activeTab', key);
    history.push({ search: urlSearchParams.toString() });
    setActiveTab(key);
  }
  const handleTabChange = key => {
    setNewActiveTab(key);
    dispatch(searchMenu({categoryId: -1, searchText: ''}));
  }
  return (
    <RestaurantTabsWrapper>
      <Tabs onChange={handleTabChange} activeKey={activeTab}>
      <TabPane tab={<FormattedMessage {...messages.service}/>} key="1">
          <RestaurantMenu type="service" />
        </TabPane>
        <TabPane tab={<FormattedMessage {...messages.product}/>} key="2">
          <RestaurantMenu type="menu" />
        </TabPane>
        <TabPane tab={<FormattedMessage {...messages.combo}/>} key="3">
          <RestaurantMenu type="combo" />
        </TabPane>
        <TabPane tab={<FormattedMessage {...messages.designArea}/>} key="4">
          <RestaurantArea />
        </TabPane>
      </Tabs>
    </RestaurantTabsWrapper>
  )
}