import React, { useEffect, useState } from 'react'
import {  getInitialValues,getValidationSchema } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import { useTranslation } from 'react-i18next';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import { useAddCategories } from '../../../api/Categories';
import Form from './AddForm';

const AddCategoriesPage = () => {


  const { mutate, isLoading:IsloadingButton, isSuccess } = useAddCategories()
  const handleSubmit = (values: any) => {
    mutate(values);
  };
  

  const { t } = useTranslation();

  useNavigateOnSuccess(isSuccess, '/Categories')

  

  const ViewProps = { getInitialValues, getValidationSchema, handleSubmit,IsloadingButton };


  return (
    <div className='ViewPage'>

      <ViewPage {...ViewProps}>
        <Tabs>
          <TabList>
            <Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
            
          </TabList>
          <TabBody >
            <div className=" mt-4"><Form /></div>
          </TabBody>

        </Tabs>
      </ViewPage>



    </div>
  )

}

export default AddCategoriesPage