import React, { useEffect, useState } from 'react'
import {  getValidationSchema, getDataToSend ,getInitialValuesForAdd as getInitialValues} 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 { useTranslation } from 'react-i18next';
import { useAddCategories } from '../../../api/Categories';
import Form from './Add/AddForm';
import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
import { useAddAttribute } from '../../../api/attribute';
import { TabsContainer } from './Add/AttributeTab/TabsContainer';
import { useAddAttributeValue } from '../../../api/attributeValue';

import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import { isvalidation } from './Add/fn/isvalidation';

const AddcategoriesPage = () => {
    
  const { setObjectToEdit, objectToEdit } = usePageState()

    const {mutate ,isSuccess,data } = useAddCategories()
    const {mutateAsync} = useAddAttribute()
    const {mutate:AddAttributeValue } = useAddAttributeValue()

    const [Attribute , setAttribute] = useState<any[]>([])
    const [AttributeValues , setAttributeValues] = useState<any[]>([])
 
  
    const handleSubmit = (values:any)=>{  
          console.log(values,"values");
        function isValid(){
        values?.Attribute?.slice(1)?.forEach((item:any) => {
          if (item && Object.keys(item).length > 0){
            setAttribute((prevAddAttributeValue) => [...prevAddAttributeValue, item]);
          }
  
          });
      
        setAttributeValues(values?.Attribute?.slice(1)?.map((item:any)=>{
          if (item && Object.keys(item).length > 0){
            return item?.AttributeValue
          }
        }))
        const CategoriesValues = {
          name: {
            en:values?.name_en,
            ar:values?.name_ar,
            de:values?.name_de
          },
          parent_id:values?.parent_id,
          photo:values?.photo,
        }
        mutate(CategoriesValues)  
      }
      const validationResults = isvalidation(values?.Attribute, t);
      
      if (validationResults.every((result) => result)) {
          isValid();
      }
      

    
  }
  useEffect(()=>{

    if(isSuccess){
      const categoryId = (data as any )?.id ;

      Attribute?.map((dataToSend:any , index:number)=>{

        const Attribute = dataToSend 
   
        const NewAttribute = {
          name:{
            en:Attribute?.name_en,
            ar:Attribute?.name_ar,
            de:Attribute?.name_de
          },
          type:Attribute?.type, 
          category_id:categoryId,
        }
      
        mutateAsync(NewAttribute).then((data)=>{
          const AttributeId = (data as any )?.id ;
            console.log(AttributeValues[0]?.slice(1),"AttributeValues");
          AttributeValues[index]?.slice(1)?.map((dataToSend:any , index:number)=>{
    
            const AttributeValue = dataToSend 
            const NewAttributeValues = {
              value:{
                en:AttributeValue?.value_en,
                ar:AttributeValue?.value_ar,
                de:AttributeValue?.value_de
              },
              image:AttributeValue?.main_photo, 
              attribute_id:AttributeId,
            }
            if (NewAttribute.type === "color") {
              NewAttributeValues["value"] = {
                en: AttributeValue?.value_en,
                ar: AttributeValue?.value_en,
                de: AttributeValue?.value_en
              }
            }
          
            AddAttributeValue(NewAttributeValues)
    
          })
        })  
      })
    
    }
  },[isSuccess])


  const {t} = useTranslation();

  useNavigateOnSuccess(isSuccess , '/categories'  )
  
  useEffect(() => {
    
    setObjectToEdit([]);
     
  }, []);

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


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

              <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("attributes")}</h6></div></Tab>


            </TabList>
            <TabBody >
              <div className=" mt-4"><Form /></div>
            </TabBody>
            <TabBody >
              <div className=" mt-4"><TabsContainer /></div>
            </TabBody>
           
          </Tabs>
        </ViewPage>
        


    </div>
  )

}

export default AddcategoriesPage