import React, { useEffect, useState } from 'react'
import { getInitialValuesAdd as getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import 'react-tabs/style/react-tabs.css';
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import BasicInfo from './BasicInfo';
import { useTranslation } from 'react-i18next';
import { BsInfoCircle } from 'react-icons/bs';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import { useAddProduct, useAddProductVariation } from '../../../api/product';
import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
import { TabsContainer } from './FormikTab/TabsContainer';
import { isvalidation } from './Addfn/isvalidation';
import { AddNewVariation } from './Addfn/AddNewVariation';
// import AttributeInfo from './AttributeInfo';

const AddProductPage = () => {


  const { mutate, isLoading:IsloadingButton, data, isSuccess } = useAddProduct()
  const { mutate: AddVariation } = useAddProductVariation()

  const [IsValed, setIsValed] = useState(false)

  const [Varibletaps, setVaribleTaps] = useState<any[]>([])

  const handleSubmit = (values: any) => {

    console.log(values.variable[1], "values.variable[1]");

    
    function isValid() {

      setVaribleTaps(values?.variable?.slice(1))

      const new_category = {
          name: {
          en: values?.name_en,
          ar: values?.name_ar,
          de: values?.name_de
        },
        category_id: values?.category_id
      }
      mutate(new_category)
    }

    const validationResults = isvalidation(values.variable, t);

    if (validationResults.every((result) => result)) {
      isValid();
    }

  }
  useEffect(() => {

    if (isSuccess) {
      AddNewVariation(Varibletaps, data, AddVariation);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess,AddNewVariation])


  const { setObjectToEdit } = usePageState()

  useEffect(() => {
    setObjectToEdit([]);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const { t } = useTranslation();

  useNavigateOnSuccess(isSuccess, '/products')



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


  return (
    <div className='ViewPage'>

      <ViewPage {...ViewProps}>
        <Tabs>
          <TabList>
            <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleInfo'>{t("Base_info")}  </h6></div></Tab>

            <Tab ><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><BsInfoCircle size={20} /></span> <h6 className='SingleInfo'>{t("VarianInfo")}</h6></div></Tab>


          </TabList>
          <TabBody >
            <div className=" mt-4"><BasicInfo setIsValed={setIsValed} IsValed={IsValed} /></div>
          </TabBody>
          <TabBody  >
            <div className=" mt-4"><TabsContainer /></div>
          </TabBody>
        </Tabs>
      </ViewPage>



    </div>
  )

}

export default AddProductPage

